内容简介:在非IE浏览器下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。浮动元素清除浮动后的浮动元素
在非IE浏览器下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。
<div class="contain">
<div class="float">浮动元素</div>
</div>
.contain{
border:1px black solid;
}
.float{
float:left;
background-color:red
}
复制代码
浮动元素
清除浮动后的浮动元素
二、清除浮动
1. 浮动元素父元素加上:after伪类
<div class="contain">
<div class="float">浮动元素</div>
</div>
.contain{
border:1px black solid;
}
.contain:after{
content:"";
clear:both;
display:block
}
.float{
float:left;
background-color:red
}
复制代码
2. 兄弟元素加上clear:both
<div class="contain">
<div class="float">浮动元素</div>
<div class="clear"></div>
</div>
.contain{
border:1px black solid;
}
.float{
float:left;
background-color:red
}
.clear{
clear:both
}
复制代码
3. 父元素触发BFC
<div class="contain">
<div class="float">浮动元素</div>
</div>
.contain{
border:1px black solid;
display:flow-root
}
.float{
float:left;
background-color:red
}
复制代码
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 如何清除浮动
- 总结:清除浮动的方法
- CSS清除浮动方法汇总
- CSS之轻松搞懂浮动与清除浮动(图文并茂)
- 利用clear清除浮动的一些问题
- CSS深入理解:overflow:hidden——溢出,坍塌,清除浮动
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。