关于浮动的那些事
2020-05-29 本文已影响0人
前端_Fn
什么是浮动元素?
- 浮动的特征
- 使块在一行显示
- 内联支持宽高
- 内容撑开高度
- 脱离文档流
- 提高层级半层
为什么会出现浮动？
- 浮动float最开始出现的意义是为了让文字环绕图片而已，但人们发现，如果想要三个块级元素并排显示，都给它们加个float来得会比较方便。
什么时候需要清除浮动？
- 如果想要实现块级元素并排显示，如下图所示：
微信截图_20200529184806.png
- 代码：
<style>
body {
margin: 0;
}
.box {
border: 1px solid red;
}
.item {
float: left;
margin: 10px;
width: 100px;
height: 100px;
background: green;
}
</style>
<body>
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
-
给三个块级元素都加上float属性后，页面效果如下图所示：
微信截图_20200529185618.png
- 显然，父元素高度塌陷了，如果我们给上面的三个绿颜色的方块设置display:inline-block也能达到让它们并排显示的效果。而且父元素的高度也不会塌陷。但是 display:inline-block 只能从左往右并且 margin 左右 auto 失效。
清除浮动的方式？
- 给父级加高度
- 扩展性差，例如：内容撑开高度，流水布局等。
- 空标签清浮动
- IE6最小高度19px（解决IE6还有两像素偏差）
- display: inline-block
- margin 左右 auto 失效
- overflow: hidden
- 当子元素过多需要滚动显示时，我们可以设置overflow的值为auto或acroll，超出父元素之外的元素会被隐藏。使用overflo:hidden也具有一定的局限性。
- after 伪类（推荐）
- 目前流行方式谁浮动往谁添加
<style>
.box {
border: 2px solid black;
}
.item {
float: left;
margin: 10px;
float: left;
width: 100px;
height: 100px;
background-color: sandybrown;
}
.clearfix {
zoom: 1;
}
.clearfix:after{
clear: both;
display: block;
content: '';
}
</style>
<body>
<div class="box clearfix">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
-
如下图效果所示
微信截图_20200529184806.png
