overflow 属性规定当内容溢出元素框时发生的事情。所有主流浏览器都支持。
<div class="a">
<div class="a-left">我是A浮动在左边</div>
<div class="a-right">我是B浮动在右边</div>
</div>
<style type="text/css">
div.a{border:1px solid blue;width:500px;height:30px;overflow:hidden;}
div.a-left{width:200px;float:left;height:30px;margin-top:6px;}
div.a-right{width:400px;float:right;height:30px;margin-top:6px;}
</style>
父div设置了overflow:hidden,此时子div的宽度超出父div,则浮动在右的子div被隐藏掉,而不是将父div水平撑开。超出的部分就会被隐藏----隐藏溢出的含义。效果:
如果不对父元素进行设置即默认情况则会出现如下效果:
clear 属性规定元素的哪一侧不允许其他浮动元素。
<style type="text/css"> div#left-div {float:left;width:40%} div#right-div {float:right;width:60%} div#bottom-div {clear:both;width:100%} </style> <div id="right-div">i'm right!</div> <div id="left-div">i'm left!</div> <div id="bottom-div">i'm bottom!</div>