常规文档流,即块级元素包围着所有子元素,而且在页面中自上而下相互堆叠在一起,浮动元素脱离了文档流,其父元素看不到它,因此也不会包围它
<div class="box">
<div class="wrap">
<img class="pictuer" src="./images/1.png" alt="">
<p class="text">jQuery and its cousins are great, and by all means use them if it makes it easier to develop
your application.</p>
</div>
<div class="footer">
If you're developing a library on the other hand, please take a moment to consider if you actually need
jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If
you're only targeting more modern browsers, you might not need anything more than what the browser ships
with.
</div>
</div>
方法1:为父元素添加overflow:hidden;
.wrap{
border: 1px solid #999;
overflow: hidden;
}
.pictuer{
float: left;
}
.text{
line-height: 30px;
}
.footer{
line-height: 36px;
border: 1px solid #f00;
margin-top: 10px;
}
方法2:同时浮动父元素;
促使父元素包围其浮动子元素的方法,是也让父元素浮动起来
.wrap{
width: 80%;
border: 1px solid #999;
float:left;
margin-bottom: 20px;
margin-top: 20px;
}
.pictuer{
float: left;
margin-right: 10px;
}
.text{
line-height: 30px;
}
.footer{
width: 80%;
clear: both;
line-height: 36px;
border: 1px solid #f00;
}
方法3:添加非浮动的清除元素;
强制父元素包含其浮动子元素的方法,就是给父元素的最后添加一个非浮动的子元素,然后清除该子元素。由于包含元素一定会包围非浮动的子元素,而且清除会让这个子元素位于(清除一侧)浮动元素的下方,因此,包含元素一定会包含这个子元素——以及前面的浮动元素。在包含元素最后添加子元素作为清除元素的方式有两种.
第一种方式不太理想,也就是简单地在HTML标记中添加一个子元素,并给它应用clear属性
<div class="box">
<div class="wrap">
<img class="pictuer" src="./images/1.png" alt="">
<p class="text">jQuery and its cousins are great, and by all means use them if it makes it easier to develop
your application.
</p>
<div class="clear_me"></div>
</div>
<div class="footer">
If you're developing a library on the other hand, please take a moment to consider if you actually need
jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If
you're only targeting more modern browsers, you might not need anything more than what the browser ships
with.
</div>
</div>
/* 第三种方法中的其一 */
.wrap{
width: 80%;
border: 1px solid #999;
margin-bottom: 20px;
margin-top: 20px;
}
.pictuer{
float: left;
margin-right: 10px;
}
.text{
line-height: 30px;
}
/* 添加清除浮动的div */
.clear {
clear: left;
}
.footer{
width: 80%;
clear: both;
line-height: 36px;
border: 1px solid #f00;
}
第二种方法clearfix规则
<div class="box">
<div class="wrap clearfix">
<img class="pictuer" src="./images/1.png" alt="">
<p class="text">jQuery and its cousins are great, and by all means use them if it makes it easier to develop
your application.
</p>
</div>
<div class="footer">
If you're developing a library on the other hand, please take a moment to consider if you actually need
jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If
you're only targeting more modern browsers, you might not need anything more than what the browser ships
with.
</div>
</div>
添加了一个清除的包含句点作为非浮动元素(必须得有内容,而句点是最小的内容)。规则中的其他声明是为了确保这个伪元素没有高度,而且在页面上不可见
使用clear:both意味着section中新增的子元素会清除左、右浮动元素(位于左、右浮动元素下方)
/* 第三种方法中的其二 */
.wrap{
width: 80%;
border: 1px solid #999;
margin-bottom: 20px;
margin-top: 20px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.pictuer{
float: left;
margin-right: 10px;
}
.text{
line-height: 30px;
}
.footer{
width: 80%;
clear: both;
line-height: 36px;
border: 1px solid #f00;
}