3
时隔多年，从新认识浮动float
source link: https://www.cnblogs.com/IwishIcould/p/17484200.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
时隔多年，从新认识浮动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;
}
如果你觉得，这篇文章写的不错，对你有用。
请给我点一个赞，感谢了。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK