web前端 解決因為浮動而引發的父元素塌陷問題

2021-10-22 16:33:01 字數 715 閱讀 9653

父元素因為浮動塌陷問題解決方法

注:清除浮動為:clear:both/left/right。

不會使得浮動的元素特性消失,

只會作用於受到浮動影響的其他元素。

1、給父元素設定高度(有侷限性)

/* 1-給父元素設定高度 */

height: 200px;

2、外牆法(不能撐開父元素):

/* 2-讓外牆清除父元素的浮動 */

.outer-wall

3、內牆法(要多新增乙個顯式div):

/* 3-讓內牆清除浮動 */

#inner-wall

4、給父元素設定浮動,後面元素清除浮動(改變了樣式)

/* 4、父元素設定浮動 */

.list1

#box

5、給父元素設定成行內塊(改變了樣式)

.list1
.list1
7、用偽元素替代內牆法(抽象clearfix類用來復用):

/* 偽元素清除浮動 */

/* 不用主動插入顯性元素 */

.container::after

程式設計時,容易因為粗心而引發的錯誤

1 二維陣列初始化問題 int a 10 10 正確 a 10 10 錯誤,和初始化區別開,需要表示式對其賦值。2 陣列初始化時維數一定要是大於或者等於1的常量表示式 int a 錯誤 int b 10 int c b 錯誤,必須要是常量 const int sz get size int d ge...

由Web前端引發的思考

程式設計,以前真是有點誤解這個詞了,認為程式設計也就是用計算機進行編碼以實現人的需求。今天才明白,這是對程式設計狹義的理解。程式設計應該是通過用計算機去實現或者做到人做不到或者需要很多時間或精力做到的事,以提高社會的生產效率。而計算機並不知道怎樣去做,這還是需要人考慮的,我們把要做的事情分析分解,然...

重新認識web前端 浮動問題的總結

浮動會使元素 脫離文件流 並按照 指定的方向 排列,直到遇到父元素的邊界或另乙個浮動元素 停止 文件流 文件中所有可見元素的排列佔位 預設塊元素從上向下排列 內聯元素從左向右排列 float left左浮動 從左向右排列元素 right右浮動 從右向左排列 none不浮動 預設 浮動元素特性 1.脫...