双容器模式
body为一层容器，container为一层，container设置最大宽度，两边边距自动计算。
- 页面较宽时，container取最大宽度，两边边距自动计算。
- 页面较窄时，两边没有边距，cantainer宽度由内容决定，尽量避免出现滚动条。
<body>
<div class="container"></div>
</body>
<style>
.container{
max-width:100px;
margin: 0 auto;
}
</style>
媒体对象
指一侧为图片，一侧为文字的布局方式，文字不会环绕在图片下方。可通过浮动布局、flex布局、表格布局等实现。
浮动
容器折叠（高度塌陷）
由于浮动元素脱离文档流，所以其容器的高度是由容器内的其他元素撑起的，如果没有其他元素，容器的高度就为零，这种情况称为容器折叠，也称为高度塌陷。
消除容器折叠
消除容器折叠，使浮动元素撑起容器高度，有两种方法：
- 使用清除浮动
在浮动元素下边添加一个元素，为其设置clear属性就可实现
消除浮动，但是这种方式不够优雅，一般通过css给容器添加伪元素，这样通过添加类名就实现需求了。以下为实现方法：
.clearfix::after {
display: block; /* display设置为非行内模式 */
content: ' ';
clear: both; /* 对于float:left和float:right都能清除浮动 */
}
还有一种改进的方法，可以同时避免容器和子元素产生外边距折叠：
.clearfix::before,
.clearfix::after {
display: table; /* 避免容器和子元素产生外边距折叠 */
content: ' ';
}
.clearfix::after {
clear: both; /* 对于float:left和float:right都能清除浮动 */
}
- 使用BFC，效果和上面改进版本的清除浮动方法一致。
BFC
BFC特性
- 包含了内部所有元素的上下外边距。可用于防止BFC首尾的元素和外部产生外边距折叠。
- 包含了内部所有的浮动元素。可用于防止浮动导致的容器折叠。
- 不会跟BFC外面的浮动元素重叠。可用于实现图片为浮动布局的媒体对象。
创建BFC的方式
- 设置overflow不为visible。推荐设置为overflow:auto。
- 设置display为inline-block、table-cell、table-caption、flex/inline-flex、grid/inline-grid等。
- 设置float不为none。
- 设置为绝对布局position:absolute或position:fixed。
