css 布局的三种方式
- 标准流:按照标签默认的特性摆放盒子(块元素纵向排列)
- 浮动流:利用浮动摆放盒子(让块元素排成一行)
- 定位流:利用定位摆放盒子
浮动流
1,浮动之后的元素会变成行内块(inline-block)
2,浮动元素不能覆盖文字
2,浮动之后的子元素,不占用标准流的空间,无法撑起父视图的高度
清除浮动带来的影响
a) 给父元素设置高度(不推荐,因为在项目中很多盒子是不固定高度的)
b 在父元素后设定空标签进行清除浮动
clear:both
c) 设定父元素的
overflow:auto
d) 使用伪对象代替空标签
div::after {
content:""
display:block
clear:both
}这是建议的方式
网友评论