定义:
浮动是元素脱离标准流的控制移动到指定位置(脱标)
浮动的作用
使块级元素排列在一行
块级元素独占一行,而浮动可以实现块级元素排列在一行,且浮动的元素彼此之间没有缝隙,超出父级元素宽度的元素会另起一行
实现行文字环绕图片
设置子元素浮动的行内元素可以设置宽高
清除浮动(解决浮动元素塌陷问题)
即解决父元素因子元素浮动引起的内部高度为0
给父元素添加高度
额外标签法
给父元素创建一个div子元素,并给该div添加属性clear:both;
<div class="father">
<div class="one"></div>
<div class="new"></div>
</div>
<style>
.new{
clear:both;
}
</style>
overflow:hidden
给父级元素添加属性overflow:hidden;(内容过多时造成内容隐藏而不是换行)
父元素调用after伪元素选择器
.clearfix:after {
content:"";
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix {
*zoom:1; //*ie6.7专门清除福鼎的样式
}
父元素调用双伪元素选择器
.clearfix:before,
.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}