总结css重要知识点时,再看了一遍张鑫旭大神的float博文(以及下一篇),加上自己的理解下下了对float的总结。
1.float最初是用来做什么的?
float最初被发明其实只是用于让文字环绕图片,但是因为其浮动性质,越来越多的人将其应用到了布局当中,所以引出了很多事情。。。
2.float有哪些特性?
包裹性
float 让文字浮动到图片周围,这就是包裹性
撇开浮动的“破坏性”,浮动就是个带有方位的display:inline-block属性。
其实 display:inline-block 也具有包裹性
<style>
div{
background-color: red;
}
</style>
</head>
<body>
<div>11111111111</div>
</body>
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyROBlL1gjMwIDM1AjM0IDMxkTMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
div是块元素,所以会占一行
div{
background-color: red;
display : inline-block;
}
将div变为行内块元素,不占一行了,相当于div就包裹住了里面的内容,这就是包裹性
当然float也有这种包裹性
div{
background-color: red;
float : left;
}
不过float是有方向的包裹,它可以向右包裹,display : inline-block 只能向左包裹
破坏性
float的破坏性非常大,它会破坏(更准确来说应该是脱离)正常的文档流。
有个哥们儿说的很形象,浏览器的窗口其实是个立体的,有好几层,添加了float属性的元素就会脱离原来那一层,跑到上一层上面,它会盖住原来那层的一些东西。(不知道这样理解对不对,但我认为这样会很好理解)
举例:
<style>
#temp1{
background-color: red;
width: 100px;
height: 100px;
}
#temp2{
background-color: blue;
width: 300px;
height: 300px;
}
#temp3{
background-color: green;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="temp1"></div>
<div id="temp2"></div>
<div id="temp3"></div>
</body>
三个div都没有添加float属性,则会这样从上到下正常显示
给第一个div添加float属性
第一个div脱离原来的那一层,到上一层去了,其他两个div会往上移,占领第一个div的原有的位置。
给第一个,第二个div都设置float
第一个第二个都 “上去了” ,因为都在上面那层所以第二个div会浮动到第一个div右边,会包裹着第一个div,这就是包裹性。第三个占领它两个的原有位置。
给三个div都设置float属性
可想而知是并排的。。。
延申:
display : inline-block 也是有包裹性,如果我们将三个div的float属性都替换成 display : inline-block 会怎么样呢?
(如果你的三个div有间隔,那是因为你的三个div之间有空格导致的,改成下面这样就能解决了
)
为什么三个div会底部对齐呢?因为三个现在都是行内块元素,它们所在的这一行被高度最高的一个行内块元素撑着的,所以就像是三个不同高度的方块放在一个容器里,当然会底部对其啦
3.float产生的后果是什么?
float产生的最常见的后果是父元素的高度塌陷
<style>
#container{
border: 2px solid black;
}
#container>div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="container">
<div></div>
</div>
给红色div添加浮动后
可看出来红色div的父元素container高度为零了,这就是高度塌陷,因为红色div相当于已经从父元素“出来了”,父元素中没有内容能撑开它了,所以就会高度塌陷。
解决高度塌陷的办法就是给父元素设置个高度。
4.清除浮动
这是未清除浮动的时候
<style>
#temp1{
background-color: red;
width: 100px;
height: 100px;
float: left;
}
#temp2{
background-color: blue;
width: 300px;
height: 300px;
float: left;
}
#temp3{
background-color: green;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="container">
<div id="temp1"></div>
<div id="temp2"></div>
</div>
<div id="temp3"></div>
</body>
我们想清除浮动那该怎么办呢,想让第三个div不被第一个第二个div的浮动影响,让它呆在它原来的位置,该怎么办呢?
最推荐
(1)设置伪元素::after来解决
#container::after{
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
给前两个div的父元素设置伪元素,那么会在父元素后面插入一个伪元素,让它清除浮动clear:both就不会影响后面的元素了。
要注意的是伪元素一定要设置content属性,为空也行,伪元素的display默认为inline,这里要设置为display:block,clear:both是清除浮动, visibility: hidden;height: 0;都是为了这个伪元素不会在页面中显示出来。
(2)overflow:hidden;
#container{
overflow : hidden;
}
但是这个方法在碰到margin负边距排版时会产生意想不到的结果,所以最好别这样用。
(3)直接在container后放一个<div style=“clear:both;”></div>
这个会浪费一个标签,并且只能使用一次,还可能会影响后续布局,所以别用。