css three (clear floating theme)

1. Three concepts about floating

Not floating float:none;

Clear surrounding floating elements float:both This is the original intention of clearing floats

The impact of clearing the floating of child elements on the parent element clearfix Many people understand this as clearing the floating. .

2. What is clear float

Clearing floats does not clear the floats of the current label. If so, why add floats?

In fact, clearing floats means clearing the floating elements next to the current element. However, the current element cannot affect others. If you can't win, you will run away, so you ran underneath.

3. Why float clearly

During layout, we often hope that certain content can be arranged horizontally. After horizontal arrangement, due to the uncertainty of the internal content, the height cannot simply be given a fixed value. And if the height is not given and the child elements float, the parent box will collapse because there is no support from the child box.

Using the feature of clear floating, we can use clear:both for the last non-floating box in the parent element to prop up the height of the parent box and change the height according to changes in the internal content.

4. Know how to float

4.1. Additional tag method

Principle: Use a single label plus clear: both to run under the floating element, thereby eliminating the collapse of the parent box caused by the floating child box.

　 Typical website: Jingdong

Advantages: Easy to understand and easy to master

　Disadvantages: Adding a lot of meaningless empty tags does not comply with the principle of separation of structure and performance, and is not conducive to later maintenance

　4.2. Parent element sets overflow: hidden

Principle: Let the parent box form a BFC. One of the characteristics of BFC is that it can carry floating elements

　　Advantages: There are no structural and semantic problems, and the amount of code is very small

　　Disadvantages: When the content increases, it is easy to cause the content to not wrap automatically, causing the content to be hidden, and elements that need to overflow cannot be displayed

4.3. Single pseudo-element

　　   .clearfix:after {<br>　　　　　　　　content: "";<br>　　　　　　　　height: 0;<br>　　　　　　　　visibility: hidden;<br>　　　　　　　　overflow: hidden;<br>　　　　　　　　dispaly: block;<br>　　　　　　　　clear: both;<br>　　　　}<br>
　　　　.clearfix {<br>　　　　　　　　zoom: 1;/*IE67*/<br>　　　　}

Typical websites: Sina, NetEase

　4.4 Double pseudo-elements

　　.Introduction to clearfix

　　　　.clearfix:before, .clearfix:after {<br>   　　　　　　 content: "";<br>    　　　　　　display: table;<br>
　　　　}/*在有该类的元素<strong>内部元素</strong>的前面和后面添加元素*/

　　　　.clearfix:after {<br>　　　　　　　　clear: both;<br>　　　　}/*只要after两侧有浮动元素，after就会跑到最下面，从而撑开带有该类名的父盒子*/<br>　　　　.clearfix {<br>　　　　　　　　*zoom: 1;<br>　　　　} /*用于兼容IE/7/6*/

　　The reason for using display:table is because there is a gap in display:block

　　A before is added to prevent margins from merging

　　Typical websites: Xiaomi, Taobao