网页制作 发布日期:2024/12/26 浏览次数:1
关于float的一些用法
左悬浮: float:left;
右悬浮:float:right;
float用法
float的用途比较广, 这里简单的介绍下集中常有的用法:
如果子元素悬浮了,会造成父元素的高度塌陷.这块涉及到了清除悬浮,下一章会提及清除悬浮的讲解
那么言归正传,
第一个现象 float=inline-block
悬浮会是4个方块变成行内块模式的样式呈现:如下图所示
<style> div{ width:200px; height:200px; background-color: pink; border:1px solid black; float:left; } </style>
<body> <div></div> <div></div> <div></div> <div></div> </body>
第二现象:
如下图所示, 由于第一个悬浮起来了,因此第二个块元素会呈现在第一个下面.
但是后面一个元素悬浮起来,不会越过到前面一个元素上面,如第四个块元素悬浮,但是第三个没有悬浮.第四季块元素保持在原来位置上.
<style> .first-one{ float:left; background-color:green; } .second-one{ background-color:purple; } .third-one{ background-color:blue; } .fourth-one{ float:left; background-color:grey; } div{ width:200px; height:200px; background-color: pink; border:1px solid black; font-size:30px; } </style>
<body> <div class= "first-one"></div> <div class= "second-one"></div> <div class= "third-one"></div> <div class="fourth-one"></div> </body>
第三个现象:
如果元素全部漂浮, 父元素剩余宽度不够支持子元素在该行排列 那么他会向上一级靠齐
本文转自:https://segmentfault.com/a/1190000022669455
总结