想必只要是写过CSS的同学，对float属性肯定不陌生。float是在CSS很常用的属性之一了。但有的时候，常用容易变成滥用，哪里都来一个float，也就造就了一些坑。
flaot属性与display属性
有的时候看回自己刚入行时写的CSS，在浮动块的相关代码时总是有类似的代码片段
div {
width: 200px;
height: 200px;
display: inline-block;
float: left;
}
不知道大家觉没觉得上面的代码有问题。答案是明确的，而问题在于display的设置上。
设置了float属性值为非none的元素，display的属性值都会变成block，无论该元素原先的display属性值是什么
下面我们来看看证据,请看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
background-color: black;
color: white;
display: inline;
//同理，可把display的值改成inline-block,block
float: left;
}
</style>
</head>
<body>
<div>hello</div>
</body>
</html>
下面是浏览器计算的结果,display的值始终为block
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
display: block;
float: left;
height: 16px;
width: 37.046875px;
所以在元素设定float属性的时候，不必去重复设定display的值
浮动清除
为什么要清除浮动
让元素浮动会导致其父族元素的高度崩塌，从而会导致一些图文围绕的问题（如果原意并非是要图文围绕）。所以清除浮动事实上就是让父元素拥有高度。
清除浮动常用的三种方式：
- 父元素overflow:hidden
- 插入clear-fix div
- :after方法
父元素overflow:hidden
-
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .wrap{ overflow: hidden; } .left{ width: 200px; height: 200px; background-color: #42b983; float: left; border: 1px solid #bbb; } </style> </head> <body> <div class="wrap"> <div class="left"></div> </div> <p>this is the example text this is the example text this is the example text this is the example text this is the example text this is the example text</p> </body> </html> -
概述：为浮动元素的父元素设置overflow:hidden.使父元素扩展至浮动元素的高度(浏览器会自动计算浮动元素的最高高度作为父元素高度).不能同时再设置height.
插入clear-fix div
-
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .clear-fix{ clear: both; } .left{ width: 200px; height: 200px; background-color: #42b983; float: left; border: 1px solid #bbb; } </style> </head> <body> <div class="left"></div> <div class="clear-fix"></div> <p>this is the example text this is the example text this is the example text this is the example text this is the example text this is the example text</p> </body> </html> -
概述：在浮动元素后添加一个clear-fix的div块元素，为该元素设置clear:both，以达到清除浮动的作用。此方法兼容性较好。但是在使用浮动较多的情况下，会产生较多额外的div元素，使得html难以维护。
:after方法
-
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .wrap:after{ display: block; content: ""; clear: both; visibility: hidden; height: 0; } .left{ width: 200px; height: 200px; background-color: #42b983; float: left; border: 1px solid #bbb; } </style> </head> <body> <div class="wrap"> <div class="left"></div> </div> <p>this is the example text this is the example text this is the example text this is the example text this is the example text this is the example text</p> </body> </html> -
概述：这个方法与clear-fix方法相似。但不用添加额外的div。在浮动元素的父元素中使用after伪类，相当于在父元素的后面添加一个div元素用于清除浮动，但是它是不可见的。较多大型网站使用该方法清除浮动。
网友评论