What is a floating
A generally box using CSS float float property, resulting in its parent objects cassette can not be softened, so CSS float float arises.
Simply put, because of the use of floating float: float right or both have produced: left or float.
The negative effects of two floating
- Parent can not be softened, the background can not be displayed
- Parent subset floating frame can not be softened
- margin padding set value can not be displayed correctly
Three ways to clear the floating
1. to the parent class can comprise a highly height subclass
This approach requires a high degree count
.divcss5{ width:400px;border:1px solid #F00;background:#FF0; height:102px} //这里高度算好102px
.divcss5-left,.divcss5-right{width:180px;height:100px;
border:1px solid #00F;background:#FFF}
.divcss5-left{ float:left}
.divcss5-right{ float:right}
2.clear: both clear float
This approach requires tagging and style
you first need a style selector
.divcss5{ width:400px;border:1px solid #F00;background:#FF0}
.divcss5-left,.divcss5-right{width:180px;height:100px;
border:1px solid #00F;background:#FFF}
.divcss5-left{ float:left}
.divcss5-right{ float:right}
.clear{ clear:both} //对应的样式选择器
Html and subclasses of the parent class which corresponds to the inside with tags:
<div class="divcss5">
<div class="divcss5-left">left浮动</div>
<div class="divcss5-right">right浮动</div>
<div class="clear"></div>
</div>
3 (recommended) parent div define overflow:. Hidden
.divcss5{ width:400px;border:1px solid #F00;background:#FF0; overflow:hidden}
.divcss5-left,.divcss5-right{width:180px;height:100px;
border:1px solid #00F;background:#FFF}
.divcss5-left{ float:left}
.divcss5-right{ float:right}
Why join overflow: hidden to clear float it? That is because the overflow: hidden property is equivalent to close to allow the parent content, so you can close to within its target content (including the use of float div box), in order to achieve a clear float. Css overflow: hidden to clear the floating method DIVCSS5 recommended.