正常文档流:浏览器从上往下 ,从左往右解析文件称为正常文档流 .
浮动: 使元素脱离正常文档流,让父元素失去高度.浮动影响的是后续摆放的元素,不影响前面的元素.
浮动可以让块(设置浮动会将行内元素转换成块元素)左浮或者右浮即相对它的父元素靠左、靠右。
解决浮动失去高度的方法: ①给父元素添加一个子元素(块),设置clear:both; 可以清楚浮动,让它有高度,占位置.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>css浮动</title>
<style>
.parent{
width: 300px;
}
.parent .son{
width: 100px;
height: 100px;
}
.parent .son.r{
background-color: red;
}
.parent .son.b{
background-color: blue;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clear{
display: block;
clear: both;
}
.next{
width: 300px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="son r fl">red</div> <!--fl,fr分别设置左右浮动-->
<div class="son b fr">blue</div>
<span class="clear"></span> <!--给父元素添加一个子元素-->
</div>
<div class="next">1</div>
</body>
</html>
解决浮动失去高度的方法: ②利用父元素的伪类元素清除浮动(::after)
比如上面的例子,可以加上下面代码:
.parent::after{
content: ""; /*开启伪类元素的条件,必不可少*/
display: block;
clear: both;
}
content: ""; 是开启伪类元素的条件,没有实际意义,但是如果加上这个属性,将不能开启这个伪类.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>利用伪类元素清除浮动</title>
<style>
ul{
list-style: none;
padding: 0;
margin: 0;
background-color: #f8f8f8;
}
ul li{
float: left;
padding: 5px 15px;
margin: 0;
background-color: red;
}
/* 利用伪类元素清楚浮动 */
.clearfix::after{
content: ""; /*开启伪类元素的条件,必不可少*/
display: block;
clear: both;
}
.test{
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<ul class="clearfix">
<li>网站导航</li>
<li>网站导航</li>
<li>网站导航</li>
<li>网站导航</li>
<li>网站导航</li>
</ul>
<div class="test"></div>
</body>
</html>
结果如下图:
如果将content:"";注释掉, 会出现下面的样子,也就是没有清除浮动,伪类元素没有起作用.