CSS中的浮动简单介绍
浮动是CSS中的一个属性
float来实现的，通过设置属性值left、right来实现元素的浮动。
示例如下：
div{float:left} /* css注释：设置div对象浮动靠左（left） */
div{float:right} /* css注释：设置div对象浮动靠右(right) */
为什么要清除浮动
元素被设置浮动后，将脱离普通文档流，跟据内容的多少来占据位置的，自身会变为块级元素，当遇到边框、其他浮动元素、块级元素会停留下来。这时如果父元素未设置高度，而是由内容撑起来的，则会出现高度清零，浮动元素的下一个未浮动元素会占据浮动元素原有的位置，导致页面的塌陷，后果很严重。
清除浮动几种常见的操作方法
- 父级div定义overflow:hidden
<style type="text/css">
.div1{
background:#000080;
overflow:hidden;/*解决代码*/
}
.div2{background:#800080;
border:1px solid red;
height:100px;
margin-top:10px;width:98%
}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
- 父级div定义伪类元素::after
<style type="text/css">
.div1{background:#000080;border:1px solid red;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮动代码*/
.clearfloat::after{display:block;clear:both;content:"";height:0}
.clearfloat{zoom:1}
</style>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
- 给最后一个浮动的标签的兄弟标签加clear:both
<style type="text/css">
.div1{background:#000080;border:1px solid red}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮动代码*/
.clearfloat{clear:both}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">
div2
</div>
- 父级元素定义display:table
<style type="text/css">
.div1{background:#000080; border:1px solid red; /*解决代码*/ width:98%; display:table; margin-bottom:10px;}
.div2{background:#800080;border:1px solid red;height:100px;width:98%;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
- 父级元素也一起浮动，不建议使用，因为还会父级元素后还会出现塌陷的问题
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left}
.div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
- 结尾处加br标签clear:both
<style type="text/css">
.div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}
.div2{background:#800080;border:1px solid red;height:100px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
.clearfloat{clear:both}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<br class="clearfloat" />
</div>
<div class="div2">
div2
</div>
网友评论