float 浮动详解
浮动(float):浮动原先设定时主要是用于文本环绕图像设定的,后来发现其在css布局中有很大的帮助,故渐渐使用浮动。
浮动后的元素脱离了文档的普通流,使得浮动的元素不占据文档的位置,其他元素可以覆盖其位置。
浮动元素不影响块框元级元素布局,但是可以影响内联元素(主要是文本)布局。(即浮动元素不占据文档流位置,不影响其他元素布局,但是浮动元素的内联元素如:文本等会改变其布局)
如图:块1浮动,块2 没有浮动,其位置在块一处(被覆盖:浮动元素不占据文档流位置),但是其内联的文本却在其原本的位置(浮动元素的内联元素布局改变)。
浮动的文本环绕:文本的位置会占据#A的位置,但是其文本会始终环绕在浮动元素A附件。
- #A {
- float:left;
- width:200px;
- height:200px;
- background:#C00;
- }
- #B {
- width:480px;
- height:230px;
- 10. background:#000;
浮动的弊端(高度塌陷): 如果父元素只包含浮动元素,且父元素未设置高度和宽度的时候,那么它的高度就会踏缩为零。
浮动的删除:1.clear:both ----如果浮动较多,会有很多<div class=’clear’></div>
2.在容器中使用overflow:auto或者hidden
3.给浮动的容器也添加浮动 float -------这样会使容器也带有浮动,影响整体布局
4.使用伪类元素 :after 在其容器中添加新样式 -------推荐使用,可复用性高
<div class="container clearfix">
<div class="block1"><span>块1</span></div>
<div class="block2"><span>块2</span></div>
<div class="block3"><span>块3</span></div>
</div>
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}