清除上外邊距溢位和浮動對父元素寬度的影響

2021-09-10 03:54:12 字數 468 閱讀 4348

上外邊距溢位:

父元素沒有邊框border,子元素設定了上外邊距,此時就會出現上外邊距溢位,本該子元素設定了上外邊距,結果卻是沒有體現出來,反而父元素上多了子元素設定的上外邊距

解決方案

在父元素新增類clearmargin-top

.clearmargin-top::before
浮動對父元素寬度的影響

子元素設定了浮動,父元素沒有設定固定寬度,此時就會出現父元素高度坍塌,不被撐開的現象。

解決方案

在父元素新增類clearfloat

.clearfloat::after
以免其他因素的干擾,開始寫網頁的時候應該對這邊距和浮動初始化,margin:0;float:none;

內外邊距 盒模型 浮動

盒子 容器 盒子模型 英文 box model。最常見的盒子是 div span 盒子中的區域 content 1.寬 width px content 2.高 height px content 3.內邊距 padding 4.外邊距 margin 5.邊框 border 注意 標準盒模型的寬和高...

內邊距和外邊距

內邊距,在邊框和內容區之間的空白區域。padding 屬性接受長度值或百分比值 或者auto 不允許為負值 1.四個方向內邊距一致時 padding 10px 元素距離外部父元素給邊框的距離均為10px 2.四個方向還可按著上 右 下 左的順序分別定義各內邊距 padding 10px 5px 10...

CSS內邊距和外邊距

一 內邊距 css padding 屬性定義內邊距,即邊框與元素內容之間的空白區域 padding 屬性接受長度值或百分比值,但不允許使用負值 可以依次表達,也可以按照上右下左的順序分別設定各邊的內邊距,各邊均可以使用不同的單位或百分比值 例如h1 等效於 h1 百分數值是相對於其父元素的 widt...