清浮动的方法_米米素材网

面试题:如何清浮动

给浮动元素的父元素手动添加一个固定的高度(不推荐）
给浮动元素的父元素设置overflow:hidden/auto
.在浮动元素的父元素结束标签之前加一个具有块元素特点的标签(我们一般用 div),给元素加一个clear:both<divstyle=clear:both"></div>
clearfix去清除浮动

[clear清除浮动] clear:both不允许左右两边有浮动对象(清除左石两边浮动的影响) clear:left不允许左边有浮动对象(清除左边浮动的影啊) clear:right不允许石边有浮动对象(清除右边浮动的影啊) clear:none允许左右两边有浮动对象默认值(不清除左右两边浮动的影响)

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
.left,.right{
width:200px;
height:200px;
float:left;
}
.left{
background-color:brown;
}
.right{
background-color:cornflowerblue;
}
.hrader{
border:10pxsolidred;
overflow:auto;
background-color:#333333
}
</style>
</head>
<body>
<divclass="hrader">
<divclass="left"></div>
<divclass="right"></div>
<!--<divstyle="clear:both;"></div>
<spanstyle="display:block;clear:both;"></span>-->
</div>
</body>
</html>