浮動帶來的影響：浮動之后，后面的元素會上去補位置;導致父元素的高度降低，這種情況被稱為：高度塌陷解決高度塌陷方法如下：
前情描述：父元素不設置高度,子元素有自己的高度,當給前面的子元素添加浮動之后,后面的子元素會上去補位置,補位完成之后,父元素的的高度會降低，這種情況被稱之為高度塌陷。
情況1：父元素添加高度
情況2：給后面的子元素添加清楚浮動，不上去補位置，clear：both
情況3：如果只有一個子元素，添加浮動之后，父元素高度就會降低為0
如何解決高度塌陷：
給父元素添加oveflow:hidden
給浮動子元素后面悄悄的補一個元素,然后給這個補位元素,清除浮動,
記住:補位元素必須是一個塊級元素,行內元素清楚不了浮動
```CSS
/*情況4:萬能清除法*/
.box:after{
content:"鐵牛最帥";
display:block;
clear:both;
/*如果上面的content沒有文本的話則下面的代碼可以省略*/
width:0px;
height:0px;
overflow:hidden;
visibility:hidden;
font-size:0px;
}
更多關于前端培訓的問題，歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓服務經驗，采用全程面授高品質、高體驗培養模式，擁有國內一體化教學管理及學員服務，助力更多學員實現高薪夢想。
京公網安備 11010802030320號