資訊專欄INFORMATION COLUMN
摘要：浮動，用于橫向布局。浮動會破壞，即浮動元素脫離文檔流當給一個元素設置浮動了之后，它不會再占用頁面當中的位置了，造成的影響不會撐開父級的高度。如下圖想要解決這個影響，就得清浮動清除浮動所造成的影響了。
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，即塊級格式化上下文） 相當于在這個元素里面建立起一堵圍墻 圍墻里面的內(nèi)容和圍墻外面的內(nèi)容不會產(chǎn)生干擾，如：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中的任何一個。文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/1234.html
摘要：本文概述本文的框架圖如下一浮動到底是什么中給出的浮動定義為浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。如果把所有三個框都向左浮動，那么框向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。 本文概述 本文的框架圖如下： showImg(https://segmentfault.com/img/remote/1460000016978861?...
閱讀 2482·2021-10-12 10:11
閱讀 1233·2021-10-11 10:58
閱讀 3275·2019-08-30 15:54
閱讀 713·2019-08-30 13:59
閱讀 681·2019-08-29 13:07
閱讀 1409·2019-08-26 11:55
閱讀 2145·2019-08-26 10:44
閱讀 2644·2019-08-23 18:25
