注意：只要有浮动那么必须有清除浮动
为什么要清除浮动？因为经过浮动了元素,它会影响到它下面的元素的排版布局,还有浮动元素的父元素没有将浮动元素包裹着
只要清除了浮动,不会影响到浮动元素的下面进行排版布局,浮动元素的父元素会将浮动元素从视觉上包裹着
<!-- 浮动造成的影响 -->
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="clear"></div>
<!-- 在最后一个浮动元素的下面新建一个空白的div,这个div的主要功能就是用于清除浮动 -->
</div>
<h2>总结表彰大会 张艺谋、谷爱凌们有话说 选择坚持</h2>
<style type="text/css">
.box{
width: 500px;
margin: 0 auto;
border: 1px solid #000;
}
.div1,.div2,.div3{
width: 100px;
height: 100px;
float: left;
}
.div1{
background-color: #f00;
}
.div2{
background-color: #0f0;
}
.div3{
background-color: #00f;
}
.clear{
clear: both;/*两者都清除*/
}
</style>
清除浮动有以下三种方法：
<style type="text/css">
.box{height: 300px;}
</style>
●给浮动元素的父元素设置一个固定的高度,但是这个方法不建议使用,因为一个元素的高度一般情况下不是手动设置的,它应该是由其自身的内容来撑高的！
<div class="clear"></div>
<style type="text/css">.clear{clear: both;}</style>
●使用清除浮动的样式属性clear,clear这个属性是专用于来清除浮动的,这个属性有三个值clear:left;清除左浮动;clear:right;清除右浮动;clear:both;两者都清除;这个属性一般是用在最后,一个浮动元素的下面,在最后一个浮动元素的下面新建一个空白的div,这个div什么都要放,不要给这个div里面放置内容,它只做一件事件就是清除浮动
<ul id="box">
<li>栏目管理</li>
<li>栏目管理</li>
<li>栏目管理</li>
<li>栏目管理</li>
<li>栏目管理</li>
<li>栏目管理</li>
</ul>
<style type="text/css">
#box{
list-style: none;
border: 1px solid red;
width: 500px;
margin: 0 auto;
overflow: hidden;
}
#box li{
float: left;
}
</style>
●使用overflow:hidden这个属性来清除浮动,overflow是一个属性,overflow:hidden它原意是用来将溢出的部分进行隐藏,但是它还可以用于清除浮动,overflow:hidden它一般主要是用来将列表的浮动给清除。