HTML清除浮动的四种方式

在我们使用html搭建网页时，如果一个父元素中的某个子元素设置浮动后，就会造成父元素的高度塌陷，会导致页面结构混乱。这是因为在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>清除浮动</title><style>*{margin: 0;padding: 0;color: white;text-align: center;font-size: 20px;}.father{border: 3px solid red;}.son1{width: 400px;height: 50px;background-color: black;}.son2{width: 600px;height: 100px;background-color: lawngreen;//设置浮动float: left;}</style>
</head>
<body><div class="father"><div class="son1">son1</div><div class="son2">son2</div></div>
</body>
</html>

执行上面代码后，发现父元素只包裹了son1这个元素
这是因为son2元素设置了浮动，脱离了文档流，不在文档流中占据位置，而父元素和son2依然是在文档流中，这就造成了父元素高度塌陷。

解决方法：

1、可以利用clear样式清除浮动
在父元素的最后添加一个空白的div，它可以撑开父元素的高度，然后对其清除浮动。这种方式可以清除浮动，但是会在页面中添加多余的结构。
clear属性取值:
none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)
left: 不要找前面的左浮动元素
right: 不要找前面的右浮动元素
both: 不要找前面的左浮动元素和右浮动元素
这里直接使用clear：both

 <div class="father"><div class="son1">son1</div><div class="son2">son2</div><div style="clear:both"></div></div>

2、利用after伪类
可以通过after伪类向父元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个空白div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用。

.father::after {/*添加一个内容*/content: "";/*转换为一个块元素*/display: block;/*清除两侧的浮动*/clear: both;}

3、给父元素定死高度
给父元素定死高度，但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。

.father {border: 3px solid red;height:800px;}

4、父元素添加overflow方法
可以通过触发BFC的方式，实现清楚浮动效果。同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。而且 overflow不为visible才能开启BFC

.father {border: 3px solid red;overflow: hidden;}

补充：

给父元素开启BFC，也能解决高度塌陷问题，
BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响。详细内容大家可以上网查找，这里略提一手。
BFC的作用：

解决浮动元素令父元素高度坍塌的问题

方法：给父元素开启BFC

原理：计算BFC的高度时，浮动子元素也参与计算
开启BFC：
1.float属性不为none

2.position 为absolute或fixed

3.display为inline-block table-cell table-caption flex inline-flex

4.overflow不为visible时

如果有什么错误或更好的建议，欢迎评论区里指出！！！

HTML清除浮动的四种方式相关推荐

div清除浮动的四种方式
div 清除浮动的四种方式清除浮动主要是为了解决父元素因为子级浮动引起高度为 0 的问题. 简单来说给父元素加一个高度也能解决这个问题,但是很多情况下不方便给父元素高度.所以,一般情况下,应该让子元 ...
清除浮动的四种方式及其原理
前言: 什么是浮动,浮动给我们造成了什么困扰,我们该使用什么方式来解决它.下面会介绍到为什么要清除浮动以及清除浮动的四种方式. 目录: 前言: 一.为什么要清除浮动二.清除浮动的第一种方式---给父 ...
CSS—清除浮动的几种方式
什么是浮动? 特性:1--浮动的元素不会占据标准流的空间,但是会影响标准流中的文本的排版.浮动只有左右浮动.2--浮动元素A的位置与上一个元素有关系.如果上一个元素有浮动,则A的顶部与上一个元素顶部对 ...
css 清除浮动的几种方式
css 清除浮动的几种方式浮动布局和定位布局为css中布局的常用的两种布局方式,而且兼容性会比较好.随着flex的流行,以后会是主流. float布局会脱离文档流,对页面的布局造成影响,比如造成父级 ...
[Web 前端] 018 css 清除浮动的四种方法
清除浮动的四种方法加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...
前端css 清除浮动的几种方式
浮动的框可以向左或向右移动,直到他的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流的块框表现得就像浮动框不存在一样.浮动的块框会漂浮在文档普通流的块框上. 清 ...
CSS清除浮动的四种方法
CSS清除浮动的四种方法第一种:使用div空标签法第二种:父元素使用overflow: hidden 第三种:伪元素选择器:after 第四种:伪元素选择器:before + after 第一种: ...
清除浮动的几种方式，以及各自的优缺点
清除浮动的几种方式,以及各自的优缺点 1.使用空标签清除浮动clear:both. 2.给父级div定义overflow:hidden 3.父级div定义伪类:after和zoom(用于非IE浏览器) ...
html中清除浮动的几种方式,清除浮动的几种方法-关于CSS清除浮动的几种方法
CSS清除浮动的3种方法,参考: 方法1: #test{clear:both;} #test为浮动元素的下一个兄弟元素方法2: #test{display:block;zoom:1;overflow ...

HTML清除浮动的四种方式

解决方法：

补充：

HTML清除浮动的四种方式相关推荐

最新文章

热门文章