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

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

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

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