浮动布局

约 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.

版权归属：洱海