浮动是css中很重要的一个属性,一般用于图文环绕网络布局等。
一.语法
- float:left 向左浮动
- float:right 向右浮动
- float:none 默认值,不浮动
二.浮动的效果
1.代码(未使用浮动)
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* .a{ width: 400px; height: .400px; background-color: #000; } */ .b{ width: 200px; height: 200px; background-color: aqua; float: left; } .c{ width: 200px; height: 200px; background-color: aquamarine; float: left; } </style> </head> <body> <div class="a"> <div class="b"></div> <div class="c"></div> </div> </body> </html>
运行效果
这是没有使用浮动的效果,类名为b,c的div块各占一行
2.代码(使用浮动)
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* .a{ width: 400px; height: .400px; background-color: #000; } */ .b{ width: 200px; height: 200px; background-color: aqua; float: left; } .c{ width: 200px; height: 200px; background-color: aquamarine; float: left; } </style> </head> <body> <div class="a"> <div class="b"></div> <div class="c"></div> </div> </body> </html>
运行效果
两次对比可以发现,使用浮动之后,子类b,c不再遵从div的标准,而是c浮动元素在b浮动的右边浮动
三.浮动的特点
- 浮动元素会脱离标准流,在标准流中不占位置
- 浮动元素比标准流元素级别高,可以覆盖标准流中的元素
- 浮动元素具有特殊的显示效果,一行可以显示多个,同样可以设置宽高
- 浮动寻找浮动,下一个浮动的元素会在上一个浮动的元素后面左右浮动
四.清除浮动
- 在父元素内容最后添加一个块级元素,给其设置clear:both;
- 直接设置父级高度;
- 用伪元素代替额外标签
.clearfix:before,
.clearfix::after{
content: “”;
display: table;
}
.clearfix:after{
clear: both;
} - 直接给父元素设置overflow:hidden;
五.注意使用float的时候,容易出现塌陷现象
原因:在浮动中,父元素的高度默认由子元素撑开,但是若子元素浮动,就会脱离标准流,没有办法撑起父元素,父元素下的元素就会自动上移,影响页面布局。
下面是具体演示:
这是没有使用浮动之前的效果,我并没有设置父级高度,在运行之后,父级的高度默认是两个子元素的高度和。
这是加了浮动之后的效果,两个子元素脱离了标准流,不再按照原本块级元素的规则排列,同时也并没有撑开父元素,加上我并没有给父元素设置高度,所以这里的父元素没有高度。