开发者学堂课程【CSS 快速掌握：清除浮动】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/611/detail/9190
清除浮动
内容介绍
一、为什么要清除浮动
二、清除浮动的方法
一、为什么要清除浮动
经过浮动的元素，会影响到下面的元素的排版布局，浮动元素的父元素没有将浮动元素包裹着。
清除了浮动不会影响到浮动元素的下面进行排版布局﹐浮动元素的父元素会将浮动元素从视觉上包裹着。
二、清除浮动的方法
1.给浮动元素的父元素设置一个固定的高度。（不建议使用）
一个元素的高度一般情况下不是手动设置的，是由其自身的内容来撑高的。
范例：
<style type="text/css">
.box{
width : 600px;
border: 1px solid #0e0;
margin-Left: auto;
margin-right: auto;
/*class=box 这个元索就是浮动元素的父元素
给浮动元素的父元素设置一个固定的高度
*/
height: 40epx;
}
.box div{
width: 100px;
width: 100px;
}
.div1{
background-coLor: #f00;
/*向左浮动*/
fLoat: left;
2. 使用清除浮动的样式属性 clear
clear 是专用于来清除浮动 clear 有三个值 clear:left; 清除左浮动 clear:r ight; 清除右浮动 clear:both; 两者都清除
clear 一般是用在最后一个浮动元素的下面
在最后一个浮动元素的下面新建一个空白的 div ，里面不放置内容，只用作清除浮动。
范例：
clear{
cLear: both;/*两者都清除*/
}
</ style>
</ head>
<body>
<div class="box">
<div class="div1"></div0>
<div class="div2"></div>
<div class="div3"></ div>
<!--在最后一个浮动元素的下面新建一个空白的 div 这个 div 的主要功能就是用于清除浮动-->
<div class="clear"></ div>
</div>
<h2>浮动与清除浮动</h2>
</ body>
</ html>
3. 使用 overflow:hidden 这个属性来清除浮动
overflow 是一个属性 overflow:hidden 原意是用来将溢出的部分进行隐藏 还可以用于清除浮动
范例：
}
Ul li{
float: left;
border : 1px solid #fee;
}
</ style>
< / head>
<body>
<ul style="overfLow: hidden; ”>
<1i>栏目管理1</1i>
<li>栏目管理2</li>
<li>栏目管理3</li>
<li>栏目管理4</li>
<li>栏目管理5</li>
<li>栏目管理6</li>
<li>栏目管理7</li>
<li>栏目管理8</li>
<li>栏目管理9</li>
<li>栏目管理10</li>
</ul>
