How to Clear Float

  css, html, html5, javascript, node.js

This article summarizes

The frame diagram of this article is as follows:

First, what is floating?

Floating is defined asA floating frame can move left or right until its outer edge touches the border that contains the frame or another floating frame.Since the floating frame is separated from the normal flow of the document, the block frame in the normal flow of the document behaves as if the floating frame does not exist.
css浮动

What are the characteristics of floating?

The characteristics of floating can be summarized in eight words:Demarcation, welt, girth and contraction.

For better explanation, please look at the following figure:
When box 1 floats to the left, it leaves the document stream (unmarked) and moves to the left (welted) until its left edge touches the left edge of the containing box. Because it is no longer in the document stream, it does not occupy space and actually covers frame 2, making frame 2 disappear from the view. If there is text in box 2, it will be arranged around box 1.

If all three boxes are floated to the left, then box 1 floats to the left until it touches the containing box, and the other two boxes float to the left until it touches the previous floating box.
CSS 浮动实例 - 向左浮动的元素

The following focuses on the fourth feature-contraction

A floating inline element (such as span img tag) can be set in width without setting display:block.

<style>
 div{
 float: left;
 background-color: greenyellow;
 }
 </style>
 </head>
 <body>
 <div>
 This is a passage
 </div>
 </body>

The following effects are obtained:

We all know that the div tag is a block-level element and will have an exclusive row. however, after div is set to float to the left in the above example, its width will no longer occupy a full row, but will be tightened to the width of the internal element, which is the meaning of the fourth feature of floating.

What are the disadvantages of floating?

First look at the following code:

<style>
 .parent{
 border: solid 5px;
 width:300px;
 }
 .child:nth-child(1){
 height: 100px;
 width: 100px;
 background-color: yellow;
 float: left;
 }
 .child:nth-child(2){
 height: 100px;
 width: 100px;
 background-color: red;
 float: left;
 }
 .child:nth-child(3){
 height: 100px;
 width: 100px;
 background-color: greenyellow;
 float: left;
 }
 </style>
 </head>
 <body>
 <div class="parent">
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
 </div>
 </body>

We wanted the parent container to contain three floating elements, but it backfired and the result was as follows:
父容器高度塌陷

This is the side effect of floating-the parent container is highly collapsed, so it is very important to clean up the floating.

Four, how to clean up the floating?

Clearing the float is not without floating. The parent container height caused by clearing the float collapses..

Routine 1: Add Height to Parent Element of Floating Element (Poor Extensibility)

If an element is to float, its parent element must have a height. The height of the box, to close the floating. You can set height directly for the parent element. In actual application, we are unlikely to add height to all boxes, which is not only troublesome, but also unable to adapt to the rapid changes of the page. On the other hand, the height of the parent container can be expanded through the content (such as img pictures), which is actually used more frequently.

Routine 2: clear: both;

Add the last redundant element to the last child element, and then set it to clear:both, so that the float can be cleared. It is emphasized here thatThe element added at the end of the parent element must be a block element, otherwise the height of the parent element cannot be raised..

<div id="wrap">
 <div id="inner"></div>
 <div style="clear: both;"  ></div>
 </div>
#wrap{
 border: 1px solid;
 }
 #inner{
 float: left;
 width: 200px;
 height: 200px;
 background: pink;
 }

Routine 3: Removal and Floating of Pseudo Elements

Although the above method can remove floating, we don’t want to add these meaningless redundant elements to the page. How to remove floating at this time?
Combination: after pseudo element and iHack can be perfectly compatible with current mainstream browsers, where iHack refers to triggering hasLayout.

<div id="wrap" class="clearfix">
 <div id="inner"></div>
 </div>
#wrap {
 border: 1px solid;
 }
 #inner {
 float: left;
 width: 200px;
 height: 200px;
 background: pink;
 }
 /* open haslayout*/
 .clearfix {
 *zoom: 1;
 }
 /*ie6 7 does not support pseudo elements */
 .clearfix:after {
 content: '';
 display: block;
 clear: both;
 height:0;
 line-height:0;
 visibility:hidden;  //Allows the browser to render it, but does not display it
 }

Add a clearfix class to the parent container of the floating element, and then add a: after pseudo element to this class to clean up the floating by adding an invisible block element at the end of the implementation element. This is a general cleaning and floating scheme and is recommended for use.

Routine 4: Use overflow:hidden for Parent Element;

This scheme makes the parent container form BFC (block level format context), and BFC can contain floating, which is usually used to solve the problem of high collapse of floating parent elements.

Trigger mode of BFC

We can add the following attributes to the parent element to trigger BFC:

  • Float is left | right
  • Overflow is hidden | auto | scorll
  • Display is table-cell | table-caption | inline-block
  • Position is absolute | fixed

You can set overflow:auto for the parent element here, but it is better to use overflow:hidden for IE compatibility.

However, this method has a defect: if any content comes out of the box, it will cut off many parts, so it cannot be used at this time.

The main features of BFC:

  • BFC container is an isolated container and does not interfere with other elements. So we can use BFC that triggers two elements to solve the vertical margin folding problem.
  • BFC does not overlap floating elements
  • BFC can contain floats, which can clear the floats.

Routine 5: br Label Cleared and Floating

Br label has one attribute: clear. This attribute is a sharp tool to remove floating. Set the attribute clear in the br tab and assign all. The float can be removed.

<div id="wrap">
 <div id="inner"></div>
 <br clear="all" />
 </div>
#wrap {
 border: 1px solid;
 }
 #inner {
 float: left;
 width: 200px;
 height: 200px;
 background: pink;
 }

If you think the article is of some help to you, welcome toMy GitHub blogThank you very much for your praise and attention.

Reference article

Br the principle of clear floating is compatible with clear:both.

Clear Float | How to Clear Float

CSS- clear float