css clear float

When we usually do projects, the float CSS property is often used. Floating an element takes the element out of the flow of the document, thus not propping up the parent's content. Today I'll show common ways to clear floats.

what is float

The floated element breaks out of the document flow and moves left or right until the edge of the floated element touches the parent box or the border of another floated element.

floating effect

Floating elements will collapse the height of the parent element

html:

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

css:

* { // 实际项目中不要用通配符*去设置样式
    margin: 0;
    padding: 0;
}
ul {
    border: 10px solid red;
}
li {
    width: 100px;
    height: 100px;
    margin-left: 10px;
    list-style: none;
    background: orange;
    float: left;
}

Effect picture:

Since the floating element is separated from the document flow, no longer occupies the original document flow space, and cannot hold the content of the parent, the height of the parent does not exist.

Below we will introduce two broad categories of clearing floats.

How to clear float

clear to clear the float (clearfix scheme)

There is a special property in css to solve the height collapse, that is the clear property that we commonly use. The usage of clear is as follows:

clear: none | right | left | both | inherit;

The following explanation of the clear value comes from w3c

• none: Default value. Allow floating elements to appear on both sides.
• right: Floating elements are not allowed on the right side.
• left: Floating elements are not allowed on the left.
• both: Floating elements are not allowed on the left and right sides.
• inherit: Specifies that the value of the clear attribute should be inherited from the parent element.

We often use it when clearing floats. Note: The clear: both;clear property only works on block-level elements.

The following shows an example related to the clear value of both.

html:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

css:

* {
    margin: 0;
    padding: 0;
}
li {
    width: 100px;
    height: 100px;
    margin-left: 10px;
    list-style: none;
    background: orange;
    float: left;
    margin-bottom: 10px;
}
li:nth-child(3) {
    clear: both;
}

The effect rendered by the above code is the following image:

I don't know if everyone started to doubt the explanation in w3c when they saw this result. In fact, the clear value of both refers to making itself and the previous floating element not adjacent. Yes, it is the front, not both the front and the back, so the effect shown in the above example is two columns instead of three columns.

The following shows the use of clear to clear the float, and then the first code, we clear the float. (Note that only the code added to the initial code is shown below)

css:

ul {
    zoom: 1;        // 为了兼容IE6/7
}
ul:after {          // 内联
    content: '';    // 内容为空字符是为了不影响本来的dom
    display: block; // 这里的值也可以是table | list-item，只要能够让伪类成为块级元素。
    clear: both;
}

Effect picture:

BFC clear float

The full name of BFC is block formatting context, which means "block-level formatting context" in Chinese.

BFC characteristics

"The enchantment of the CSS world" (quoted from Zhang Xinxu's "CSS World"), in this enchantment, no matter how the internal sub-elements change, it will not affect the external elements. The margins of BFC elements do not collapse because margin collapsing affects the layout of outer elements. Clear the float. If the BFC cannot clear the float, the height of the BFC element will collapse, and the internal elements will affect the layout of other elements, which is contrary to the above-mentioned sub-elements inside the BFC element that will not affect the external elements. .

Implementation of BFC: (quoted from Zhang Xinxu's "CSS World")

• root element
• The value of float is not none
• The value of overflow is auto, scroll, hidden
• The values ​​of display are table-cell, table-caption and inline-block
• The value of position is not relative and static

css:

ul {
    overflow: auto; // 使浮动元素的父级成为BFC就行可以实现清浮动
}

The effect is as follows:

You may have questions if you only need to implement BFC in one sentence, then why do we still use the above clearfix solution?

overflow: auto;IE6/7 is not supported. overflow: hidden;IE6 is not supported, elements outside the container may be hidden using this property.

However, everyone thinks that there are still many users who use IE6/7/8. I personally think that we don't need to care about IE6/7/8 now, and abandoning that part of the user has little impact on us. The above paragraph is just a personal thought, and I did not think that others must think this way. If you have any dissatisfaction with this paragraph, please spit it out.

Finally, it is recommended that you do not blindly use the clearfix solution.