浮动的定义:
当元素设置了浮动属性,元素的宽度会随着内容的变化而变化,其次,会对紧邻在其后的元素造成影响,使元素脱离了文档流,按指定方向上移动,遇到父级边界或者相邻的浮动元素就停下来。
1、加宽父级元素
给父级元素设定一个大于子元素的width值,使之可以完全包裹子层。
2、给父级加浮动(margin左右失效)
.fatherbox{
border: 5px solid red;
float: left;
}
.son1{
width: 300px;
height:300px;
background-color: blue;
float: left;
}
3、用inline-block(margin左右auto失效)
.fatherbox{
border: 5px solid red;
display: inline-block;
}
.son1{
width: 300px;
height:300px;
background-color: blue;
float: left;
}
4、空标签(定义一个空内容的标签,在其里面设置clear:both)
.fatherbox{
border: 5px solid red;
float: left;
}
.son1{
width: 300px;
height:300px;
background-color: blue;
float: left;
}
/*这是空标签*/
.div1{
clear: both;
}
5、br清浮动(br里有个属性clear:all)(但不符合结构、样式、行为三者分离)
<div class="fatherbox">
<div class="son1">我是子层</div>
<!-- 这个br要放在后面,放在前面就会造成换行效果 -->
<br clear="all"/>
</div>
6、after伪类(主流方法)
<head>
<title>清除浮动的测试</title>
<style type="text/css">
.fatherbox{
border: 5px solid red;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
.son1{
width: 300px;
height:300px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="fatherbox clearfix">
<div class="son1">我是子层</div>
</div>
</body>
6、overflow:hidden;