阅读量:0
要清除浮动，可以在父元素上添加CSS属性
overflow: hidden;或者overflow: auto;。在网页布局中，浮动（float）是一种常见的CSS技术，它允许元素向其父容器的左侧或右侧移动，从而实现图文混排等效果，当多个元素同时使用浮动时，可能会导致父容器高度塌陷，影响页面布局的稳定性，为了解决这个问题，CSS提供了overflow属性，通过设置该属性可以清除浮动，恢复父容器的高度。
CSS overflow 属性介绍
overflow属性用于控制内容溢出元素框时的显示方式，它有以下几个常用值：
1、visible（默认）：内容不会被修剪，会呈现在元素框之外。
2、hidden会被修剪，并且其余内容是不可见的。
3、scroll会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto被修剪，则浏览器会显示滚动条以便查看其余的内容。
5、inherit：规定应该从父元素继承overflow属性的值。
使用 overflow 清除浮动
为了清除浮动，通常会将父容器的overflow属性设置为hidden或auto，这两个值都可以使父容器包含浮动的子元素，从而防止高度塌陷。
使用overflow: hidden;：这种方法简单有效，但会隐藏所有溢出的内容。
.container { overflow: hidden; }使用overflow: auto;：这种方法会在内容溢出时显示滚动条，适用于需要滚动查看内容的情况。
.container { overflow: auto; }相关问答 FAQs
问题1：为什么使用overflow: hidden;可以清除浮动？
答案：当一个元素的overflow属性设置为hidden时，它会扩展自己的宽度和高度以包含所有浮动的子元素，这样，即使子元素浮动到了父容器的外部，父容器也会扩展自己的边界来包含它们，从而防止了高度塌陷。
问题2：overflow: auto;和overflow: scroll;有什么区别？
答案：overflow: auto;溢出时自动添加滚动条，而overflow: scroll;是否溢出都会显示滚动条，这意味着overflow: scroll;可能会在不需要滚动的情况下仍然显示滚动条，而overflow: auto;则只在必要时才显示。
