什么浮动?
选择器{float(浮动): 属性值 - left / right 、none 默认值}
元素的浮动是指设置了浮动属性的元素会脱离标准普通流 ,移动到其父元素的指定位置
为什么要清除浮动?
浮动的本质是用来做一些文字混排效果的,但是被我们拿来做布局用,则会有很多的问题出现,
由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响,为了解决这些问题,此时就需要在该元素中清除浮动。
准确地说,并不是清除浮动,而是清除浮动后造成的影响
方法一:
<body>
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
<!-- 在你想要清除浮动的元素后面 加一个空标签 给属性值 clear:both-->
<div style="clear: both;"></div>
</div>
<div class="box"></div>
</body>
缺点:会多解析一个标签 对性能有影响
方法二:
<body>
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
<div style="clear: both;"></div>
</div>
<div class="box"></div>
</body>
.son1{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
float: left;
/*清除两边浮动*/
clear: both;
}
方法三:
<body>
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
<div style="clear: both;"></div>
</div>
<div class="box"></div>
</body>
.father{
width: 500px;
/*height: 500px;*/
background-color: #1d90ff;
/*在父元素的样式里面加上
overflow: hidden;
溢出隐藏*/
overflow: hidden;
/**zoom: 1;*/
}
方法三:
<body>
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
<div style="clear: both;"></div>
</div>
<div class="box"></div>
</body>
缺点:溢出的部分会隐藏 ,不利于后期的维护
.father:after{
/*给父元素加伪元素选择器*/
/*必须配合 content 设置空值*/
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.father{
width: 500px;
/*height: 500px;*/
background-color: #1d90ff;
overflow: hidden;
/*注意*/
*zoom: 1;
}