开场白
随着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; }
尾声
如果你觉得,这篇文章写的不错,对你有用。 请给我点一个赞,感谢了。