博学谷学习记录】超强总结，用心分享|清除浮动

今天分享一些关于清除浮动的方法，也会介绍一些浮动的特点及注意点，希望大家喜欢，

1. 浮动的作用

早期的作用：图文环绕 ；      现在的作用：网页布局；

场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右。

 2. 浮动的代码

属性名：float        左浮动：float : left    右浮动：float : right

 3. 浮动的特点

1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置；

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

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

4. 浮动元素有特殊的显示效果；

• 一行可以显示多个

• 可以设置宽高

注意点： 浮动的元素不能通过text-align:center或者margin:0 auto。

 4. 浮动的案例

a标签默认是行内元素，默认不能设置宽高？？

• 方法一：给a标签设置 display : inline-block；

• 方法二：给a标签设置 display : block；

• 方法三：给a设置 float : left；

清除浮动

清除浮动带来的影响

影响：如果子元素浮动了，此时子元素不能撑开父元素；

清除浮动的目的是什么

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

清除浮动的方法

① 直接设置父元素高度

• 优点：简单粗暴，方便

• 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块

② 额外标签法

操作：

1. 在父元素内容的最后添加一个块级元素

2. 给添加的块级元素设置 clear:both

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

③ 单伪元素清除法

用伪元素替代了额外标签

① ：基本写法

② ：补充写法

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

④ 双伪元素清除法

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

⑤ 给父元素设置overflow : hidden

 直接给父元素设置 overflow : hidden

• 优点：方便

以上就是关于浮动及清除的内容了，我们应该做到即时复习，巩固学过的知识，记忆得更牢固。学习方法因人而异，各不相同，愿同学们找到适合自己的学习方法，在学习生涯中绘上精彩的一笔!