布局(layout)
,指各个元素在网页里如何摆放以形成最终的页面,默认布局是从左到右
、从上到下
。改变元素的默认布局方式有很多种,浮动(float)
就是其中一种。
1. 浮动(float)
浮动类似于word里面文字围绕图片的效果,可设置为向左(left)
或向右(right)
浮动。
// 元素默认没有浮动效果
float: none;
// 向左浮动
float: left;
// 向右浮动
float: right;
1.1 浮动元素的盒模型
普通元素有文档流(即上面提到的默认布局),浮动元素页游浮动流,即浮动元素会跟随浮动元素浮动。
// 1.宽度和高度
浮动元素的宽高由内容撑开
// 2.内边距
浮动元素可正常设置内边距
// 3.边框
浮动元素可正常设置边框
// 4. 外边距
浮动元素可正常设置外边距,且外边距不会重叠。
1.1 包含块的包裹性
距浮动元素最近的块级元素称为包含块,浮动元素不会超出包含快的上、右、左边界,但可以超出元素的下边界。
// 包含块也浮动时,包含块的宽度和高度由子元素撑开
想让浮动元素超出父元素边界有2中办法:1.浮动元素宽度大于父元素宽度;2. 浮动元素设置负外边距,但会与其他正常元素重叠。
// 如果浮动元素设置负外边距,与其他元素重叠时会有如下情况:
// 1. 浮动元素与行内元素重叠:
行内元素的边框、背景和内容,都在浮动元素之上
// 2. 浮动元素与块级元素重叠
块级元素的边框、背景在浮动元素之下,内容在浮动元素之上
1.3 浮动元素的破坏性
浮动元素会造成父元素的高度塌陷,即当只有1个浮动元素且父元素未设置高度时,父元素的高度为0;
解决父元素的高度塌陷就要清除浮动,有2种办法:
1.3.1 在浮动元素后,添加新元素并设置clear属性
// 直接设置新元素清除浮动
.clear { clear: both; }
// 使用after伪类
.clear::after {
content: ‘‘;
display: block;
clear: both;
}
1.3.2 触发包含块的BFC
// 设置float属性为left或right
.fl { float: left; }
// 设置position属性为fixed或absolute
.fx { position: fixed; }
// 设置display属性为inline-block/table-cell/table-caption/flex
.hd { display: flex; }
// 设置overflow属性不为visible
.ov { overflow: hidden; }