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

爱被打了一巴掌 2021-09-20 15:28 495阅读 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 条评论，495人围观）

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

相关阅读

相关清除浮动-双伪元素清除浮动（HTML、CSS）

清除浮动-双伪元素清除浮动（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

谁践踏了优雅/ 2023年10月03日 13:24/ 0 赞/ 25 阅读

相关清除浮动-：after伪元素法（HTML、CSS）

清除浮动-：after伪元素法（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

小灰灰/ 2023年10月03日 13:06/ 0 赞/ 18 阅读

相关清除浮动（HTML、CSS）

清除浮动（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head> <meta

落日映苍穹つ/ 2023年10月03日 13:06/ 0 赞/ 18 阅读

相关解决浮动带来的一些影响

想起以前一个问题，要对几个元素设置浮动，设置浮动完后，发现最外面的一个div缩回去了，但一时又忘记浮动的属性，结果搞了半天，才发现是浮动这个属性在搞鬼。实验开始。那么我

小鱼儿/ 2023年01月21日 12:22/ 0 赞/ 55 阅读

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

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

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

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

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

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

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

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

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

相关清除浮动影响

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

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

相关父元素清除浮动

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

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

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

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

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