float浮動-清浮動BFC渲染機制

PrototypeZ 發(fā)布于2019-04-23 11:50 / 669人閱讀

摘要：浮動，用于橫向布局。浮動會破壞，即浮動元素脫離文檔流當給一個元素設置浮動了之后，它不會再占用頁面當中的位置了，造成的影響不會撐開父級的高度。如下圖想要解決這個影響，就得清浮動清除浮動所造成的影響了。

float浮動，用于橫向布局。

起初的橫向布局都用display:inline-block，但是這會導致兩個元素之間有空隙，而這是由代碼換行解析成空格的，解決元素間有空隙，空格：font-size:0;,但影響很大。 ? float浮動會破壞line-box，即浮動元素脫離文檔流（當給一個元素設置浮動了之后，它不會再占用頁面當中的“位置”了），造成的影響：不會撐開父級的高度。如下圖：想要解決這個影響，就得清浮動（清除浮動所造成的影響）了。清浮動后，如下：清浮動的方法： 1.給浮動元素的父級加高度　　拓展性不好　　在不能確定父級高度的情況下不能使用 ? 2.clear:both(用得最多的方法) 　　*zoom:1 用來觸發(fā) hasLayout(IE瀏覽器的BFC)

.clear{
     *zoom: 1;/*兼容IE6,7*/
}
.clear:after{
      content: ";
      display: block;
      clear: both;
}

3.BFC(是一套渲染機制) 　　觸發(fā)一個元素的BFC（Block?Formatting?Contexts，即塊級格式化上下文）　　相當于在這個元素里面建立起一堵圍墻　　圍墻里面的內容和圍墻外面的內容不會產生干擾，如：

overflow: hidden;

想要觸發(fā)BFC的方式（滿足任一條件即可）：（1）float的值不為none； ? ? （2）overflow的值不為visible； ? ? （3）display的值為inline-block, table-cell, table-caption, flex, inline-flex之一； ? ? （4）position的值不為static或則releative中的任何一個。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1234.html

css清浮動

摘要：元素浮動會讓元素脫離文檔流，從而不能撐開父級的內容。今天我將展示常見的清除浮動的方法。什么是浮動什么是浮動浮動元素脫離文檔流并且向左或者向右移動，直到浮動元素的邊緣碰到父級框或者另一個浮動元素的邊框為止。允許浮動元素出現(xiàn)在兩側。我們在平常做項目的時候，float這個css屬性經常會用到。元素浮動會讓元素脫離文檔流，從而不能撐開父級的內容。今天我將展示常見的清除浮動的方法。什么是浮動浮動元...

EdwardUp 2019-04-23 13:46 評論0 收藏0
如何清除浮動

摘要：本文概述本文的框架圖如下一浮動到底是什么中給出的浮動定義為浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。如果把所有三個框都向左浮動，那么框向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。本文概述本文的框架圖如下： showImg(https://segmentfault.com/img/remote/1460000016978861?...

fjcgreat 2019-08-23 13:04 評論0 收藏0
如何清除浮動

摘要：本文概述本文的框架圖如下一浮動到底是什么中給出的浮動定義為浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。如果把所有三個框都向左浮動，那么框向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。本文概述本文的框架圖如下： showImg(https://segmentfault.com/img/remote/1460000016978861?...

amuqiao 2019-08-02 11:59 評論0 收藏0
如何清除浮動

摘要：本文概述本文的框架圖如下一浮動到底是什么中給出的浮動定義為浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。如果把所有三個框都向左浮動，那么框向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。本文概述本文的框架圖如下： showImg(https://segmentfault.com/img/remote/1460000016978861?...

wua_wua2012 2019-08-29 17:15 評論0 收藏0