时隔多年，从新认识浮动float
开场白
随着css的发展，在加上各种优秀ui库的兴起。
我们在项目中浮动用的很少。
但并不意味着我们不使用浮动了。
曾几何时，浮动这个属性是那个遥远时代的'超级明星'
排版，布局，都需要使用他。
今不如昔：现在没落了。他的这几个属性还记得吗？
1.包裹性
2.浮动的自适应性
3.float会改变display的值，不是block就是table
4.浮动导致的父元素高度坍塌
5.没有任何margin合并
6.会破坏文档流浮动有包裹性
包裹性就是说：假设父级元素500px;
浮动的子集元素是200px;
则表现的是200px。这就是包裹性。
我理解的包裹性指的是：浮动元素的宽度会收缩到与内容一致。高度由内容决定。
浮动会使盒子产生包裹性
/* 父级元素500px */
.father-box {
width: 500px;
background: pink;
}
/* 浮动的子集元素 */
.float-son {
float: left;
}
.float img {
width: 200px;
}
<body>
<div class="father-box">
<div class="float-son">
<img src="./xueyue.png">
</div>
</div>
</body>
浮动的自适应性
浮动的自适应性:如果子元素不仅有图片。
还有文字，则原来图片是多大就是多大。
<div class="father-box">
<div class="float-son">
<img src="./xueyue.png"> 我就喜欢看雪月剑仙李寒衣
</div>
</div>
float会改变display的值
元素一旦float的属性值不是none，
则 display 的值不是block就是table。
很多小伙伴看见上面这一句话，
就以为我是胡说八道。
我们可以通过下面的例子来看下
.father-box {
width: 500px;
background: pink;
}
.float-son {
float: left;
}
.float img {
width: 200px;
height: 200px;
}
<body>
<div class="father-box">
<div class="float-son">
</div>
</div>
<script>
let dom = document.querySelector(".float-son")
console.log('是bolck吗？', window.getComputedStyle(dom).display)
</script>
</body>
看见上面这个例子是不是有点不可思议。
元素设置为浮动后，这个元素的 display 竟然是 block。
有些小伙伴会说：你傻呀？div本来就是块级元素，所以display就是block。
是吗？那我们来看下面的例子。
.father-box {
width: 500px;
background: pink;
}
.float-son {
float: left;
}
.float img {
width: 200px;
height: 200px;
}
<body>
<div class="father-box">
<sapn class="float-son">
我是span标签，设置了float
</sapn>
</div>
<script>
let dom = document.querySelector(".float-son")
console.log('是bolck吗？', window.getComputedStyle(dom).display)
</script>
</body>
看了这个例子是不是觉得发现了新知识。
一个本来是行级元素。怎么它的display是block。
是的，你没有看错。
元素一旦float的属性值不是none，则 display 的值不是block就是table。推论
<sapn class="float-son">
我是span标签，设置了float
</sapn>
.float-son {
float: left;
/**这个block没有意义，不用写 */
display: block;
}什么情况下浮动的值是 table ？
当浮动后； display: inline-table时，
display的属性值才是table；
其他属性值，全是block。
我们可以通过下面的代码来验证一下。
<style>
/* 父级元素500px */
.father-box {
width: 500px;
background: pink;
}
.float-son {
float: left;
/* display的值设置为 inline-table*/
display: inline-table
}
.float img {
width: 200px;
height: 200px;
}
</style>
<body>
<div class="father-box">
<sapn class="float-son">
我是span标签，设置了float
</sapn>
</div>
<script>
let dom = document.querySelector(".float-son")
console.log('是table吗？', window.getComputedStyle(dom).display)
</script>
</body>
浮动导致的父元素高度坍塌
我们都知道，浮动属性由一个非常著名的表现特征。
就是会让父元素的高度坍塌。
浮动导致的父元素高度坍塌我的理解就是：
子元素设置浮动后脱离文档流，
从而导致子元素无法撑父元素的高度，
就会造成父元素的高度塌陷。下面这样的情况就会导致父元素高度坍塌
<style>
/* 父级元素500px */
.father-box {
width: 500px;
background: pink;
}
.float-son {
height: 300px;
float: left;
}
</style>
<body>
<div class="father-box">
我是父级元素
<div class="float-son">
下面这样的情况就会导致父元素高度坍塌
</div>
</div>
</body>
我理解的 clear
我们都知道 clear 有4个属性值，分别是:
clear：none | left | right | both
之前看见有一篇文章有一个大佬是这样说的：
凡是可以使用 clear:left 或者 clear:right起作用的，
就一定可以可以使用 clear：both去替换。
我觉得不一定。我们来看下面的例子
.left {
background: rgba(44, 230, 7, 0.904);
height: 300px;
float: left;
}
.center1 {
background: rgb(10, 197, 239);
height: 300px;
float: left;
}
.center2 {
background: rgb(224, 9, 167);
height: 300px;
/* 这里我使用了右侧清除浮动 */
clear: right;
}
.right {
background: pink;
height: 300px;
float: left;
}
<body>
<div class="father-box">
<div class="left">我是左侧的内容</div>
<div class="center1">center1center1center1</div>
<div class="center2">center2center2center2</div>
<div class="right">我是右侧的内容</div>
</div>
</body>
其他的不变，按照大佬的说法：
可以使用 clear: right;就可以使用 clear：both去替换。
我就修改一下，如下：
.center2 {
background: rgb(224, 9, 167);
height: 300px;
/* 这里我使用了右侧清除浮动 */
clear: both;
}
尾声
如果你觉得，这篇文章写的不错，对你有用。
请给我点一个赞，感谢了。
手机扫一扫
移动阅读更方便
你可能感兴趣的文章