CSS clears the float in two ways (Clearfix and Clear)

Recently it's always floating, both of which are always in front of you, or remove the parent and sibling floating styles always thinking. The two ways of writing are in Base.css.

In the process of doing a trip to Rui Xiang, or eat a big loss, is to clear the float, whether it is the same level or the parent, have not cleared the float, resulting in the div will often be unable to wrap the child (often a review height=0). Two examples are now used to consolidate the situation.

<! DOCTYPE html>"en -US">"UTF-8"/> <title> How to use Clearfix and clear</title> <link rel= in HTML"stylesheet"Type="Text/css"href="/css/base.css"Media=" All"/> <style type="Text/css">. fl{float: Left;}    . Demo{background: #ccc;}    . Item1{background: #f90; height:100px;width:100px;}    . Item2{background: #fc0; height:200px;width:100px;} </style>class="Demo"> <divclass="FL item1"></div> <divclass="FL item2"></div> </div></body>
People who have used CSS floats know that floating can cause a lot of unknown problems. And here is, in the parent demo because the height is not set, originally it should be propped up by the child content, but because the child content floating away from the flow of the document, so. The demo's div has no height and will naturally not see the gray background color. So naturally the quickest we think of adding a height, so it is true, but its one loses will clear the floating meaning, the other is if in the project, this part of the content is dynamic data, we can not give it dead high, can only clear floating. I remember what I used to do is Overflow:hidden and Clear:both.
<! DOCTYPE html>"en -US">"UTF-8"/> <title> How to use Clearfix and clear</title> <link rel= in HTML"stylesheet"Type="Text/css"href="/css/base.css"Media=" All"/> <style type="Text/css">. fl{float: Left;}    . Demo{background: #ccc;}    . Item1{background: #f90; height:100px;width:100px;}    . Item2{background: #fc0; height:200px;width:100px;} </style>class="Demo"> <divclass="FL item1"></div> <divclass="FL item2"></div> <divclass="Clear"></div> </div> class="Clearfix Demo"> <divclass="FL item1"></div> <divclass="FL item2"></div> </div></body>
Clearfix is mainly used in the parent layer of the floating layer, and clear is mainly used between the floating layer and the floating layer, and the floating layer of the same level, if you want to open the height of the parent layer, clear will be placed in the end.
Learn Clearfix: Click here for details "Chat css about clearfix--clear floating" .