浮动布局

作用:布局方式之一让块元素水平排列

属性名:float

属性值:

left:左对齐

right:右对齐

特点:

• 顶对齐
• 具有行内块显示模式的特点
• 父级宽度不够, 浮动的子级会换行
• 浮动的盒子会脱标

清除浮动

场景:浮动元素会脱标, 如果父级没有高度, 子级无法撑开父级高度(可能导致页面布局错乱) 解决方法:清除浮动(清除浮动带来的影响)

方法一:

在父元素内容的最后添加一个块元素, 设置CSS属性clear: both

方法二:

单伪元素

选择器::after {
    content: "";
    display: block;
    clear: both;
}

方法三:

双伪元素法(推荐)

选择器::before,
选择器::after {
    content: "";
    display: block;
}

选择器::after {
    clear: both;
}

方法四:

父元素添加CSS属性overflow: hidden