CSS布局之浮动布局

布局(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; }

CSS布局之浮动布局

上一篇:常见的HTTP状态码


下一篇:jQuery---jQuery中的事件与动画