CSS 浮动与浮动塌陷 笔记

一、代码整体说明

示例演示浮动布局以及父级高度塌陷的问题与解决方案。

二、样式解析

通配符清零内外边距

* {margin: 0; padding: 0;}

清除浏览器默认边距，统一页面样式。

父容器 .parent

.parent{

margin:0 auto; /* 盒子水平居中 */

width:1000px; /* 固定宽度 */

overflow: hidden; /* 清除浮动，解决高度塌陷 */

}

子元素浮动

.son1, .son2 {

float: left; /* 左浮动，元素横向排列 */

}

son1：宽占父容器 20%，高 500px，绿色

son2：固定宽 200px，高 200px，蓝色

三、浮动核心知识点

float: left

元素脱离标准文档流，向左并排排列，实现多栏布局。

浮动高度塌陷问题

现象：子元素设置浮动后，父元素高度变为 0，无法被内容撑开。

原因：浮动元素不占据文档流空间。

本例解决方案

overflow: hidden;

给父元素添加该属性，是清除浮动最简单常用的方式，可让父元素自适应子浮动元素高度。

四、补充要点

margin: 0 auto 实现水平居中，必须搭配固定宽度才生效。

除 overflow:hidden 外，清除浮动还有额外写法（伪元素法、额外标签法等）。

浮动元素之间会紧密并排，空间不足时会自动换行。