文章目录

为什么要清除浮动
清除浮动本质
- 什么是高度塌陷？
- 为什么会脱标？
一、清除浮动的语法
二、清除浮动的方法
- 1.额外标签法
- 2.父级添加 overflow 属性
- 3.父级添加 after 伪元素
- 4.父级添加双伪元素

为什么要清除浮动

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子（由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响）。

清除浮动本质

清除浮动的本质是清除浮动元素脱离标准流造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

清除浮动的策略：闭合浮动（只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子）

什么是高度塌陷？

父元素高度自适应，子元素添加浮动后，造成父元素高度为0，称为高度塌陷问题。

为什么会脱标？

因为所有元素本都是在标准流里布局，即块元素独占一行、行内元素从左到右排列；被添加浮动效果后，不再属于标准流且会脱离标准流（脱标），此元素的位置将不再保留。此时，本被布局在下面的块元素会往上移动，排在右边的行内元素会向左边移动，导致整个布局发生改变。

一、清除浮动的语法

书写语法：

选择器 { clear：属性值；}

属性值：

left   不允许左侧有浮动元素（清除左侧浮动的影响）
right  不允许右侧有浮动元素（清除右侧浮动的影响）
both   同时清除左右两侧的影响

二、清除浮动的方法

1.额外标签法

额外标签法也称为隔墙法，是W3C推荐的做法
额外标签法就是在最后一个浮动元素末尾添加一个空的额外标签，并添加清除浮动样式。

代码如下（示例）：

<div style="clear:both"></div>//或者其他标签（如<br/>等）

注意：要求这个新的标签必须是块级元素

优点	通俗易懂，书写方便
缺点	添加许多无意义的标签，结构化较差

2.父级添加 overflow 属性

将其属性值设置为 hidden、auto 或 scroll

代码如下（示例）：

 overflow：hidden；

优点	代码简洁
缺点	无法显示溢出部分

3.父级添加 after 伪元素

:after 是额外标签法的升级版，也是给父元素添加
代码写在css里，后面有要清除浮动的话，调用这个代码就可以了

代码如下（示例）：

.clearfix:after {content:"";display:block;height:0;clear:both;visibility:hidden;
}
.clearfix {//IE6、7 专有*zoom:1;
}

优点	没有增加标签，结构更简单
缺点	照顾低版本浏览器
代表网站	百度、淘宝网、网易等

4.父级添加双伪元素

:after 和 :before 是额外标签法的升级版，也是给父元素添加
代码写在css里，后面有要清除浮动的话，调用这个代码就可以了

代码如下（示例）：

.clearfix:before,
.clearfix:after {content:"";display:table;
}
.clearfix:after{clear:both;
}
.clearfix {//IE6、7 专有*zoom:1;
}

优点	代码更简洁
缺点	照顾低版本浏览器
代表网站	小米、腾讯等

在 HTML 中清除浮动四种的方法相关推荐

BFC以及清除浮动四种方式
什么是BFC 先了解常见的三种定位方案: bfc是普通流: 可以将bfc看作是一个属性 2.如何触发bfc 1．根元素() 2．浮动元素(元素的float不是none) 3.绝对定位元素(元素的pos ...
Python 中浅拷贝的四种实现方法
方式一:使用切片 [:] 列表 # 浅拷贝 [:] old_list = [1, 2, [3, 4]] new_list = old_list[:]old_list.append(5) old_lis ...
CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: 1 <div ...
html中清除浮动的几种方式,清除浮动的几种方法-关于CSS清除浮动的几种方法
CSS清除浮动的3种方法,参考: 方法1: #test{clear:both;} #test为浮动元素的下一个兄弟元素方法2: #test{display:block;zoom:1;overflow ...
Android中Activity的四种启动方式
谈到Activity的启动方式必须要说的是数据结构中的栈.栈是一种只能从一端进入存储数据的线性表,它以先进后出的原则存储数据,先进入的数据压入栈底,后进入的数据在栈顶.需要读取数据的时候就需要从顶部开 ...
Java中创建对象的四种方式
为什么80%的码农都做不了架构师?>>> Java中创建对象的四种方式 (1) 用new语句创建对象,这是最常见的创建对象的方法. (2) 运用反射手段,调用java.l ...
tp5类的属性不存在_thinkPHP5.1框架中Request类四种调用方式示例
本文实例讲述了thinkPHP5.1框架中Request类四种调用方式.分享给大家供大家参考,具体如下: 1. 传统调用访问方式:http://127.0.0.1/demo/demo3/test?n ...
【温故知新】——原生js中常用的四种循环方式
一.引言本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出"欢迎下次光临" 在网页中弹出框输入1 网页输 ...
pytorch梯度下降函数_Pytorch中常用的四种优化器SGD、Momentum、RMSProp、Adam
来源:AINLPer微信公众号编辑: ShuYini 校稿: ShuYini 时间: 2019-8-16 引言很多人在使用pytorch的时候都会遇到优化器选择的问题,今天就给大家介绍对比 ...

在 HTML 中清除浮动四种的方法

文章目录

为什么要清除浮动

清除浮动本质

什么是高度塌陷？

为什么会脱标？

一、清除浮动的语法

二、清除浮动的方法

1.额外标签法

2.父级添加 overflow 属性

3.父级添加 after 伪元素

4.父级添加双伪元素

在 HTML 中清除浮动四种的方法相关推荐

最新文章

热门文章

在 HTML 中 清除浮动四种的方法

文章目录

为什么要清除浮动

清除浮动本质

什么是高度塌陷？

为什么会脱标？

一、清除浮动的语法

二、清除浮动的方法

1.额外标签法

2.父级添加 overflow 属性

3.父级添加 after 伪元素

4.父级添加双伪元素

在 HTML 中 清除浮动四种的方法相关推荐

最新文章

热门文章

在 HTML 中清除浮动四种的方法

在 HTML 中清除浮动四种的方法相关推荐