css3 清除浮動的方式

昔憶落落發表於2019-01-29
CSSS3

1.clear 屬性

clear屬性規定元素的哪一側不允許有其他元素浮動：left，right，both，預設：none

2. 兄弟元素設定  clear:both

    <style>        .wrap {            background-color: green;        }
        .fl {            float: left;        }    </style><body>    <div class="wrap">        <img class="fl" src="./test.png" />        <div style=" clear:both;margin-bottom:50px;">兄弟元素設定clear:both</div>    </div>    <p style="margin-top: 50px;">兄弟元素設定clear:both來清除浮動會有margin重疊現象</p></body>複製程式碼

css3 清除浮動的方式

導致margin重疊，如上，margin-top與margin-bottom重疊，因為清除浮動元素和除浮動元素之外的其他元素處於同一個BFC。【下文會將BFC】

3. 父元素新增after偽元素

    <style>        .wrap {            background-color: green;        }
        .fl {            float: left;        }        .clearfix::before,        .clearfix::after {            content: ".";            display: block;            height: 0;            overflow: hidden;        }        .clearfix:after {            clear: both;        }    </style><body>    <div class="wrap clearfix">        <img class="fl" src="./test.png" />        <div>            父元素的::after偽元素並不是浮動元素【在這裡是圖片】的相鄰的兄弟元素，就達不到清除浮動的效果父元素的::after偽元素並不是浮動元素【在這裡是圖片】的相鄰的兄弟元素，就達不到清除浮動的效果父元素的::after偽元素並不是浮動元素【在這裡是圖片】的相鄰的兄弟元素，就達不到清除浮動的效果        </div>    </div></body>複製程式碼

綜上所述，清除浮動程式碼：

.clearfix:after{
content:"";
display:block;
height:0;
overflow:hidden;
clear:both;
}
複製程式碼

BFC

BFC：塊級格式化上下文。

以下元素會為其內容生成一個BFC：

  • 浮動元素，即 float：left、right
  • 絕對定位元素，即position：absolute，fixed
  • 塊容器，block containers，比如： block：iniline等
  • 設定了除了visible外的overflow值的塊盒子，即overflow：hidden，scroll，auto

BFC特性：

  • 建立BFC的元素中，自浮動元素也會參與高度計算
  • 與浮動元素相鄰的，建立了BFC的元素，都不能與浮動語速互相覆蓋
  • 建立了BFC的元素不會與他們的子元素margin重疊


note：如果是在js中通過element.style設定元素浮動，就要用cssFloat，因為float是js的一個關鍵字。

浮動元素的破壞性：元素浮動之後可能導致復原不俗高度塌陷。（因為浮動元素被從正常流中溢位了，父元素還在正常流中，所以父元素不能被浮動元素撐大）

其他破壞性的屬性：

  • display:none
  • position:absolute/fixed/sticky

css3中‘+’選擇器表示某元素後相鄰的兄弟元素，也就是緊挨著的沒事單個的

而‘~’選擇器則表示某元素後所有的同級的置頂元素，強調所有的。



相關文章