CSSclear属性给float带来的影响有哪些-创新互联

本篇内容介绍了“CSS clear属性给float带来的影响有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

为昌平等地区用户提供了全套网页设计制作服务，及昌平网站建设行业解决方案。主营业务为成都网站设计、成都网站制作、昌平网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

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

HTML片段一：

代码如下:

#parentDiv
{
background: #00ff00;
}
.ret
{
width: 100px;
height: 200px;
background: #0000ff;
}
.fl
{
float: left;
}
.fr
{
float: right;
}

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

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

代码如下:

#parentDiv
{
background: #00ff00;
}
.ret
{
width: 100px;
height: 200px;
background: #0000ff;
}
.fl
{
float: left;
}
.fr
{
float: right;
}
.clear
{
clear: both;
}

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

分析：

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

“CSS clear属性给float带来的影响有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！

本文名称：CSSclear属性给float带来的影响有哪些-创新互联
转载源于：http://cxhlcq.com/article/copioe.html