清除HTML元素浮动带来的影响

爱被打了一巴掌 2021-09-20 15:28 396阅读 0赞

一般使用浮动后都要清除，否则后面的元素可能会出现问题。清除浮动并不是指让元素自身没有浮动效果，而是消除元素浮动对其他元素的影响。清除浮动的方法有很多，方式也各有不同。

清除浮动大致有两种方式：一通过添加一个元素设置属性清除；二通过设置父级元素的属性清除。

### **1.利用伪元素清除浮动** ###

实现方式：使用css添加一个after伪元素，添加clear属性并设置为left、right或both，根据需要选择。

优点：浏览器支持好，不容易出现问题；不直接在HTML中添加元素，通过CSS添加的元素（伪元素），这种方式并没有破坏HTML结构，保持标签的语意。

缺点：在浏览器解析完后，仍会添加一个元素（after）；代码量会增多。

建议：推荐使用，建议定义公共类，以减少CSS代码。

### **2.在浮动元素结尾添加元素清除浮动** ###

实现方式：在浮动元素结尾直接添加一个div标签，然后设置clear：both属性

有点：简单，代码少

缺点：破坏HTML结构，造成HTML代码冗余，新手阅读时容易混淆

建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

### **3.父级定义height清除浮动** ###

实现方式：设置父级元素的height，这样就解决了父级元素无法自动湖区高度的问题

有点：简单，代码少，易掌握

缺点：只适合固定的布局，即要给出固定的高度，如果高度和父级不一样时会产生问题

建议：不推荐使用，要使用只在固定高度的元素使用

### 4.父级元素设置overflow：hidden属性 ###

实现方式：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

有点：代码少，浏览器支持好，简单

缺点：不能和position一起使用，因为超出的部分会被因藏

建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用

### 5.父级元素设置voerflow：auto ###

实现原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度

优点：简单，代码少，浏览器支持好

缺点：内部宽高超过父级div时，会出现滚动条。

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

### 6.父元素也一起浮动 ###

实现原理：所有代码一起浮动就变成了一个整体

建议：不建议使用，这种方式会使网页很乱

### 7.父级设置display：table ###

实现原理：将div属性变成表格

建议：不建议使用，改变了元素的显示方式，会出现未知问题

--------------------

参考资料：https://www.cnblogs.com/nxl0908/p/7245460.html

发表评论取消回复

表情：

评论列表（有 0 条评论，396人围观）

还没有评论，来说两句吧...

相关阅读

相关 float元素产生浮动流清除浮动

浮动元素产生了浮动流所有产生了浮动流的元素，块级元素看不到他们，产生了BFC的元素和文本类属性的（inline）的元素以及文本都能看得到浮动元素，这样就导致一个问题，一

冷不防/ 2022年11月27日 15:53/ 0 赞/ 161 阅读

相关 CSS的clear去除清除浮动元素

clear 属性规定元素的哪一侧不允许其他浮动元素 <table> <tbody> <tr> <td>left</td> <td>在左侧不允许浮动元

逃离我推掉我的手/ 2022年10月26日 03:47/ 0 赞/ 121 阅读

相关 html元素设置浮动,html浮动元素

1. position:static 所有元素的默认定位都是：position:static，这意味着元素没有被定位，而且在文档中出现在它应该在的位置。一般来说，不用指定

秒速五厘米/ 2022年10月09日 13:29/ 0 赞/ 176 阅读

相关浮动布局float带来的高度塌陷——清除浮动 clearfix

很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨的态度来对待代码，也能更好地帮助我们理解开头的三个问题。 1）清除浮动

今天药忘吃喽~/ 2022年05月22日 09:52/ 0 赞/ 204 阅读

相关 HTML伪元素、用伪元素清除浮动流

1. 伪元素：可以当做html标签用css样式来操作，但是没有html结构（1）任何一个元素都有伪元素，可以当做正常元素来使用。（2）::before ：在标签的逻辑之

àì夳堔傛蜴生んèń/ 2022年05月13日 09:04/ 0 赞/ 198 阅读

相关浮动带来的问题，以及清除浮动影响的方式

查阅多篇资料，最初使用浮动float是为了让文字环绕图片，这样显示的效果会更好一点；因为元素使用浮动之后元素就具有了块级元素和行级元素的特点，不仅可以设置宽高也能设置在水平方向

淩亂°似流年/ 2022年05月09日 07:08/ 0 赞/ 248 阅读

相关清除浮动影响

任务描述本关任务：清除浮动。效果如下： ![198872][] 相关知识为了完成本关任务，你需要掌握：1.浮动出现的问题，2.清除浮动的方法。浮动出现的问题

怼烎@/ 2022年04月04日 12:09/ 0 赞/ 177 阅读

相关 css 清除浮动元素影响的几个常用简单的方法

![在这里插入图片描述][70] 1、写在 :after 伪元素里面（最推荐） <style> div{width: 500px;m

悠悠/ 2022年03月16日 05:26/ 0 赞/ 179 阅读

相关父元素清除浮动

[清除浮动float (:after方法)][float _after] 1. 什么时候需要清除浮动？清除浮动有哪些方法？（1）对元素进行了浮动（float）后，该元

Myth丶恋晨/ 2021年10月09日 03:26/ 0 赞/ 387 阅读

相关清除HTML元素浮动带来的影响

一般使用浮动后都要清除，否则后面的元素可能会出现问题。清除浮动并不是指让元素自身没有浮动效果，而是消除元素浮动对其他元素的影响。清除浮动的方法有很多，方式也各有不同。清除浮

爱被打了一巴掌/ 2021年09月20日 15:28/ 0 赞/ 397 阅读