CSS clear属性给float带来哪些影响

建站知识 2021-07-03 08:15www.168986.cn长沙网站建设

关于clear属性的定义参考W3School 在阅读相关内容时一定要认真，认真，仔细，仔细阅读“说明”部分“如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下”。
Ok，狼蚁网站SEO优化举例说明下clear属性到底给float（clear常常和float结合使用）带来哪些影响

HTML片段一

复制代码

代码如下:

#parentDiv
{
background: #00ff00;
}
.ret
{
width: 100px;
height: 200px;
background: #0000ff;
}
.fl
{
float: left;
}
.fr
{
float: right;
}
<div id="parentDiv">
<div id=“son1” class="fl ret">
<h2>Left</h2>
</div>
<div id=”son2" class="fr ret" >
<h2>Right</h2>
</div>
</div>

效果由于float导致两个子DIV(#son1, #son2)不占文档流，所以虽然两个子DIV的高为200PX，父DIV#parentDiv的高度是0PX。

问题有时候我们需要父DIV的高度正好容纳下所有的子DIV。在这种情况下我们可以使用clear属性了。
HTML片段二在HTML片段一的基础上添加CSS classclear，给父DIV添加个子DIV（#son3）

复制代码

代码如下:

#parentDiv
{
background: #00ff00;
}
.ret
{
width: 100px;
height: 200px;
background: #0000ff;
}
.fl
{
float: left;
}
.fr
{
float: right;
}
.clear
{
clear: both;
}
<div id="parentDiv">
<div id=“son1” class="fl ret">
<h2>Left</h2>
</div>
<div id=”son2" class="fr ret" >
<h2>Right</h2>
</div>
<div id="son3" class=“clear”>
</div>
</div>

效果这种情况下父DIV的高度是200PX（和子DIV中最高的高度一样）。

分析

子DIV（#son3）使用了clear属性，这样其上外边框在float元素（#son1，#son2）下外边框的狼蚁网站SEO优化，因为子DIV#son3要占文档流，所以父DIV不得不增加高度来容纳子DIV#son3，这样也就达到了预期效果。

上一篇：IE8下显示图片时多出一个边框而Chrome或Firefox下却下一篇：CSS中height和width在IE和其他浏览器中的区别图文详

CSS clear属性给float带来哪些影响

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

CSS clear属性给float带来哪些影响

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设