（3.19）消除浮动的区别.

Posted 2020-06-25

希赛网 > 问答 > 程序开发 > Web开发 > Web前端 > overflow：hidden跟clear：both

overflow：hidden跟clear：both

overflow：hidden和clear：both

　　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 属性规定元素的哪一侧不允许其他浮动元素。