学习CSS之clear属性
2014-05-12 22:56
246 查看
关于clear属性的定义参考:W3School 在阅读W3School相关内容时一定要认真,认真,仔细,仔细阅读“说明”部分:“如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下”。
Ok, 下面举例说明下clear属性到底给float(clear常常和float结合使用)带来哪些影响:
{
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 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 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)下外边框的下面,因为子DIV#son3要占文档流,所以父DIV不得不增加高度来容纳子DIV#son3,这样也就达到了预期效果。
欢迎大家分享学习经验
Ok, 下面举例说明下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 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 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)下外边框的下面,因为子DIV#son3要占文档流,所以父DIV不得不增加高度来容纳子DIV#son3,这样也就达到了预期效果。
欢迎大家分享学习经验
相关文章推荐
- 每日学习总结:CSS:Clear属性的用法、重复交易提示框、弹出提示框后页面变形、asp.net调用smtp服务发送邮件问题
- 每日学习总结:CSS:Clear属性的用法、重复交易提示框、弹出提示框后页面变形、asp.net调用smtp服务发送邮件问题
- CSS学习之“文本属性”
- 学习CSS之属性
- jQuery学习三 操作属性和CSS
- div+css布局中父层div高度不随子div高度变化的解决方法(clear属性使用方法)
- Event常见属性-css学习
- (一)学习CSS之z-index属性
- CSS学习(14)--表格属性
- 学习CSS使用技巧教程(7)连接属性
- 从零开始前端学习[24]:css的高级属性(继承,重用,组件化的开发过程)
- CSS学习----块级元素和内联元素(display属性)
- CSS学习笔记10:属性margin使用说明
- 深入学习CSS中Margin和Padding属性用法
- CSS的几个属性display,float,clear,overflow,visibility
- 使用CSS的float和clear属性完成页面布局
- (六)学习CSS之color属性
- 在CSS中clear属性的妙用
- 学习CSS使用技巧教程(6)文字属性
- CSS中的float和clear属性