浮动的定义以及清除方法
什么是浮动
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;
}