04.css入门笔记-浮动以及清除浮动的方法

 

文章目录

前言

一、pc端传统布局方式有哪些？

二、浮动

1.浮动的定义

2.浮动的特性（重难点）

3.为什么要清除浮动

3.清除浮动的本质

4.清除浮动的方式

1.额外标签法（隔墙法），是W3C推荐的做法

2.父元素添加overflow属性，属性值有auto\hidden\scroll

3.父元素添加  :after 伪元素

4.父元素添加双伪元素

总结

---

---

前言

今天分享的是css的浮动，以及清除浮动的四种方法！在分享之前，也会简单介绍下pc端传统的布局方式！

---

一、pc端传统布局方式有哪些？

pc端传统的布局方式有3个：标准流、浮动和定位

1.标准流（文档流）

标准流：指的是标签元素按照规定好的默认方式排列。如：行内元素、块级元素

2.浮动（详细介绍请往下看）

3.定位（后续我们在单独拿出来分享）

网页布局使用准则：多个块级元素纵向排列用标准里；横向排列用浮动

二、浮动

1.浮动的定义

浮动可以改变默认标签的排列方式

---

2.浮动的特性（重难点）

1. 浮动元素会脱离标准流，浮动的盒子不再保留原先的位置
2. 浮动的元素会一行内显示并且元素顶部对齐
3. 浮动的元素具有行内块元素的特性：

• 如果块级元素没有设置宽度，默认和父元素宽度一致，但是添加浮动后，大小根据内容来决定
• 浮动的盒子中间是没有空隙的，紧挨一起
• 行内元素同理  

---

3.为什么要清除浮动

因为大部分情况下父级元素不方便给高度，但子盒子浮动后不占位置，导致父元素盒子高度为0，影响下方的标准流盒子

---

3.清除浮动的本质

1.清除浮动元素造成的影响

2.如果父元素有高度，则不需要清除浮动

3.清除浮动后，父元素就会根据浮动的子元素自动检测高度，这时父元素就有了高度，不会影响下方标准流

---

4.清除浮动的方式

1.额外标签法（隔墙法），是W3C推荐的做法

直接在最后一个浮动的属性后设置一个空的块元素标签，添加clear: both；属性就可以

优点：通俗易懂

缺点：容易多出很多无意义的标签元素

2.父元素添加overflow属性，属性值有auto\hidden\scroll

优点：代码简洁

缺点：无法显示溢出的部分

3.父元素添加  :after 伪元素

优点：没有增加额外标签、结构更简单

缺点：要照顾低版本的浏览器

代表网站：百度、淘宝、网易等

.clearfix:after {
    content: "";
    /* 伪元素默认为行内元素，要转化为块元素 */
    display: block;//转化为块元素
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    /* IE6、IE7 专有 */
    *zoom: 1;
}

4.父元素添加双伪元素

优点：结构更简单

缺点：要照顾低版本的浏览器

代表网站：小米、腾讯等

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;//转化为块元素并且在一行显示
}
.clearfix:after {
    clear: both;
}
.clearfix {
    /* IE6、IE7 专有 */
    *zoom: 1;
}

---

总结

以上就是今天为大家分享的关于浮动的特性以及如何清除浮动的四种方法！