CSS布局（浮动）

目录

1.浮动

1.1 浮动的作用

1.2 浮动的代码

 1.3 浮动的特点

 2. 清除浮动

 2.1 清除浮动的介绍

2.2 清除浮动的方法

① 直接设置父元素高度

② 额外标签法

③ 单伪元素清除法 

 ④ 双伪元素清除法

⑤ 给父元素设置overflow : hidden

---

1.浮动

1.1 浮动的作用

• 图文环绕
• 网页布局：让垂直布局的盒子变成水平布局，如：一个在左，一个在右

1.2 浮动的代码

     属性名：float

     属性值：

属性名	效果
left	左浮动
right	右浮动

 1.3 浮动的特点

1）浮动元素会脱离标准流（简称：脱标），在标准流中不占位置（相当于从地面飘到了空中） 

2）浮动元素比标准流高半个级别，可以覆盖标准流中的元素

3）浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

4）浮动元素会受到上面元素边界的影响

 5）浮动元素有特殊的显示效果

• 一行可以显示多个
• 可以设置宽高

注意点：

• 浮动的元素不能通过text-align:center或者margin:0 auto，让浮动元素本身水平居中

实例：

 2. 清除浮动

 2.1 清除浮动的介绍

1. 含义：清除浮动带来的影响

影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

2. 原因：

子元素浮动后脱标 → 不占位置

3. 目的：

需要父元素有高度，从而不影响其他网页元素的布局

2.2 清除浮动的方法

① 直接设置父元素高度

特点：

• 优点：简单粗暴，方便
• 缺点：有些布局中不能固定父元素高度。

② 额外标签法

操作：

1. 在父元素内容的最后添加一个块级元素
2. 给添加的块级元素设置 clear:both

特点：

• 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

③ 单伪元素清除法 

 操作：用伪元素替代了额外标签

/* 基本写法 */

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

/* 补充写法 */

.clearfix::after {
    content: '.';
    display: block;
    clear: both;
    /* 补充代码：在网页中看不到伪元素 */
    height: 0;
    visibility: hidden;
}

特点：

• 优点：项目中使用，直接给标签加类即可清除浮动

 ④ 双伪元素清除法

操作：

.clearfix::before,
.clearfix::after {
    content: '';
    display: table;
}
.clearfix::after {
    clear: both;
}

特点：

• 优点：项目中使用，直接给标签加类即可清除浮动

⑤ 给父元素设置overflow : hidden

操作：

• 直接给父元素设置 overflow : hidden

特点：

• 优点：方便