CSS中清除浮动的方式探究

来源：互联网发布：淘宝联盟qq群推广步揍编辑：程序博客网时间：2024/05/10 19:36

前言：为什么要清除浮动？

因为浮动的元素会脱离当前文档流，将不再占用当前页面的位置,这样它下面的元素会往上移动，从而使得原有的样式发生变化，这是我们不希望看到的，所以设置浮动后一定要清除浮动！

方式1、使用样式属性clear: clear:left;//清除左浮动 clear:right;//清除右浮动 clear:both;//清除所有浮动

一般我们都会采用clear:both; 具体代码如下：标红代码是关键代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>清除浮动方式1</title><style type="text/css">#div2{float: left;}#div3{float: right;}.clear{clear: both;}</style></head><body><div id="div1" style="border:1px solid red;width:800px;"><div id="div2" style="border:1px solid green;width:200px;height:200px;background-color:green;"></div><div id="div3" style="border:1px solid blue;width:200px;height:200px;background-color:blue;"></div><div class="clear"></div>  <!--这里的<div class="clear"></div>不能放置在父div外面，要紧挨着设置浮动的div,否则无效--></div></body></html>

方式2、使用overflow:hidden; overflow:hidden;原本用于隐藏超出div显示区域部分的内容，除此之外，还可以用于清除浮动，不过需要注意的是：一定要给需要清除浮动的元素的父标签使用该设置，具体代码如下：标红部分为关键代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>清除浮动方式2</title><style type="text/css">#div2{float: left;}#div3{float: right;}</style></head><body><div id="div1" style="border:1px solid red;width:800px;overflow:hidden;"><!--一定要给父标签设置--><div id="div2" style="border:1px solid green;width:200px;height:200px;background-color:green;"></div><div id="div3" style="border:1px solid blue;width:200px;height:200px;background-color:blue;"></div></div></body></html>

方式3、给父元素设置一个固定的高度,不怎么用，因为一个元素的高度通常不是手动设置的，而是由内容"撑"起来的！具体代码如下：标红的为关键代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>清除浮动方式2</title><style type="text/css">#div2{float: left;}#div3{float: right;}</style></head><body><div id="div1" style="border:1px solid red;width:800px;height:200px;"><!--注意是给父标签设置--><div id="div2" style="border:1px solid green;width:200px;height:200px;background-color:green;"></div><div id="div3" style="border:1px solid blue;width:200px;height:200px;background-color:blue;"></div></div></body></html>

阅读全文

0 0