浮动的目的
如何让多个块元素在同一行显示? 要解决上述问题,我觉大部分人用的最多的就是浮动布局了。
浮动分为左浮动和右浮动: float:left; float:right; 清楚浮动方式: clear:both;
开启浮动后的影响
对兄弟元素的影响
1.A元素开启浮动后 后面的块元素B会上移 如果想保持在原来的位置可以清除浮动对B的影响 2.A元素是块元素没开启浮动 下面的B元素开启浮动后上不去
浮动对父元素的影响
由于自元素开启了浮动 脱离文档流 所以无法撑起父元素高度引起了高度坍塌 解决方案: 1.设置高度 2.添加一个空元素然后清除浮动 3.给父元素设置overflow:hidden 4.父元素设置成浮动 使用伪元素解决高度塌陷问题: 可以给父元素添加一个class名:clearfix; .clearfix::after{ /* 伪元素 必须有content才会显示 */ content: ""; /* 默认 伪元素是inline 需要改造成block */ display: block; /* 清除浮动 */ clear: both; } 或者: .clearfix::before{ content: ""; clear: both; }
若有错误请纠正指出,谢谢!