浮动的定义以及清除方法
什么是浮动
1.浮动的定义
在一个模块上添加浮动会使模块脱离文档流，也就是不在占用文档的位置。添加浮动也会使一个行内元素变成块状元素；
2.添加浮动的方法
（1）相对定位：position：absolute
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
position:absolute;//相对定位
left:0;/*确定盒子边框距离文档（浏览器）左边框的距离*/
top:0;/*确定盒子边框距离文档（浏览器）顶部的距离*/
width:200px;
height:200px;
background-color:red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>（2）float方法：float: left | right;（向左或者向右浮动）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width:100%;
height:50px；
}
span{
float:left;/*使span左侧浮动*/
margin-left:200px;/*距离左边框200px距离*/
}
a{
float:right;/*使a右侧浮动*/
margin-right:200px;/*距离有边框200px距离*/
text-decoration: none;/*去掉连接的下划线*/
color: black;
}
a:hover{/*伪类选择器，为鼠标经过添加样式*/
color:darkred;
}
</style>
</head>
<body>
<div>
<span>请点击右侧的“百度”</span>
<a href="#">百度</a>
</div>
</body>
</html>结果如图所示
清除浮动的方法
1.为什么清除浮动
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。（父级元素因为子级浮动引起内部高度为0 的问题）
2.清除浮动的方法
（1）额外标签法
在浮动的盒子下放入一个新的空标签，使用clear:both;清除浮动
.clearfix{
clear:both;
}
<div class="clearfix"></div>这中方法增加了无意义标签并不是最好的方法
（2）overflow属性方法
给父级元素添加overflow属性。
overflow:hidden|auto|scroll
在使用这种方法时，内容增多时候会造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
（3）after伪元素清除浮动
直接为父元素添加下面这个类
.clearfix:after{
content: ""; /*不可以省略*/
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*为IE6，IE7专用*/
}（4）before和after双伪元素清除浮动
直接在父元素中添加clearfix类
.clearfix:before,.clearfix:after {
content:"";
display:table; /* 这句话可以出发BFC BFC可以清除浮动*/
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
