This article brings you an introduction to clearing floats and closing floats. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Why should we clear the float

• The child element float:left; leaving the document flow will cause the parent element to collapse (unable to hold up)

• The parent element is supported by the child element

• Clear float clear:both

清除浮动
 
 
 
 
 
 
 // 伪元素 :after .clear:after{ clear:both; content:"."; display:table; width:0; height:0; visibility:hidden; }

• Closed float - add additional elements clear:both

Parent element does not set height

子元素 float:left 额外增加元素 clear:both

• Closed float--use br and Its own html attributes

==Note== clear=all Deprecated attributes (moz)

• Close float-- The parent element sets overflow:hidden

• closed float -- the parent element sets display:table

The above is the detailed content of Introduction to clear floats and closed floats. For more information, please follow other related articles on the PHP Chinese website!