css 浮动布局

浮动布局是我们学习css阶段一个非常重要的布局方式,在学习浮动布局之前我们首先来认识一下什么是浮动布局。

1. 为何使用浮动布局:

浮动布局解决了多个块级元素在一行显示的问题 浮动分为左浮动和右浮动 (float : left; / float : right; )

2.浮动后元素有什么特点?

开启浮动后 : 1. 浮动后元素会立即脱离原来的文档流(在文档流中没有该元素的位置)

　　　　　　2. 浮动后元素的层级会默认上调 会覆盖到其他的元素

　　　　　　3. 浮动后元素覆盖其他元素但不会覆盖文字

　　　　　　4. 行元素和行内块元素浮动后会默认变成块元素 变成块元素之后元素的高度默认由内容撑开

　　　　　　5. 浮动不会继承

3. 浮动后对兄弟元素和父元素有什么影响?

对兄弟元素的影响 : 当前元素开启浮动后后面的兄弟元素会默认上移,如果想让兄弟元素在原来的位置保持不动可以清除浮动对后面兄弟元素的影响。

对父元素的影响 : 高度塌陷 (由于子元素开启了浮动脱离了原来的文档流,父元素没有设置高度,所以引起了父元素的高度塌陷)。

4. 清除浮动的几种办法

1. 给父元素设置高度(不推荐)

2.添加一个空元素然后清除浮动(有多余结构 不推荐)

3.给父元素设置 ovaflow:hidden;

4.给父元素也设置浮动

5. 使用伪元素(终极解决方案)

.clearfix::after{

　　clear : both ;

　　display : block;

　　content : " ";