外观
浮动布局
约 235 字小于 1 分钟
2024-10-2
作用: 布局方式之一让块元素水平排列.
属性名: float.
属性值:
left: 左对齐.
right: 右对齐.
特点:
- 顶对齐.
- 具有行内块显示模式的特点.
- 父级宽度不够, 浮动的子级会换行.
- 浮动的盒子会脱标.
清除浮动
场景: 浮动元素会脱标, 如果父级没有高度, 子级无法撑开父级高度(可能导致页面布局错乱).
解决方法: 清除浮动(清除浮动带来的影响).
方法一:
在父元素内容的最后添加一个块元素, 设置CSS属性clear: both.
方法二:
单伪元素.
选择器::after {
content: "";
display: block;
clear: both;
}方法三:
双伪元素法(推荐)
选择器::before,
选择器::after {
content: "";
display: block;
}
选择器::after {
clear: both;
}方法四:
父元素添加CSS属性overflow: hidden.
版权所有
版权归属:洱海