揭秘float浮动布局的神秘面纱

📔序言

在Web开发中，精通CSS布局是提高页面开发速度的关键。随着Web技术的不断演进，实现各种布局的方法层出不穷。

近期，我利用零散的时间，花费半个月整理了一系列文章。本系列涵盖了CSS中各种布局、实现方法以及常用技巧。通过这一系列的文章，你将对CSS布局有全新的认识。

你可以通过这篇文章导航到整个系列，快速找到你感兴趣的主题（建议收藏）。

深度解析浮动

📔浮动的起源

浮动最初并非为了实现复杂的布局，而是为了简单的文字环绕效果。
浮动属性的官方定义是指定元素沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。一旦给元素设置了浮动属性，该元素将脱离文档流。

🍚浮动属性值

浮动属性主要包含以下三个取值：

left: 元素向左浮动
right: 元素向右浮动
none: 元素不进行浮动

下面是一段示例代码，演示了如何使用这些浮动属性值：

<!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> .container { width: 1640px; margin: 0 auto; } .content { width: 800px; background-color: #3498db; margin: 10px; float: left; /* 使用左浮动 */ } .item { height: 300px; width: 300px; background-color: #2ecc71; font-size: 100px; line-height: 300px; color: #eee; } p { margin: 5px; } /* 开启浮动 */ .item-l { float: left; } .item-r { float: right; /* 使用右浮动 */ } </style> </head> <body> <div class="container"> <div class="content"> <div class="item item-l">左浮动</div> <p>我如果爱你——绝不像攀援的凌霄花，借你的高枝炫耀自己；</p>  </div> <div class="content"> <div class="item item-r">右浮动</div> <p>我如果爱你——绝不像攀援的凌霄花，借你的高枝炫耀自己；</p>  </div> </div> </body></html>

上述代码展示了如何使用浮动属性值来控制元素的浮动方向，通过左浮动和右浮动可以实现不同的布局效果。

执行结果：

基本特性

使用 float 属性的元素将具有两个主要特性：

包裹性：包裹性指的是元素的宽度会调整到与其内容一致。
破坏性：破坏性表示父元素的高度将发生塌陷。

🍚清除浮动

🌰1. 使用带 clear 属性的占位元素

在浮动元素后插入一个空的占位元素，例如 <div></div> ，并在CSS中设置样式为 .clear{clear:both;} ，即可清理浮动效果。同样，也可以选择使用 <br /> 或 <hr /> 进行清理操作。

以下是示例代码：

<!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>清理浮动：使用带 clear 属性的占位元素</title> <style> .news { background-color: #ff4757; border: solid 1px #eccc68; width: 1000px; margin: 0 auto; } .news img { float: left; width: 700px; } .news h1 { float: right; } /* 清除浮动元素 */ .clear { clear: both; } </style> </head> <body> <div class="news"> <img src="../image/img.jpg" /> <h1>some text</h1> <div class="clear"></div> </div> </body></html>

优势：简单易行，代码紧凑，浏览器兼容性良好。

劣势：需要引入一些无语义的 HTML 元素，可能使代码显得不够优雅，且后期维护稍显繁琐。

🌰2. 使用 CSS 的 overflow 属性清除浮动

为浮动元素的容器添加 overflow:hidden; 或 overflow:auto; 可以实现清除浮动的效果。

以下是示例代码：

<!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>使用 CSS 的 overflow 属性清除浮动</title> <style> .news { background-color: #ff4757; border: solid 1px #eccc68; width: 1000px; margin: 0 auto; /* 通过添加 overflow: hidden; 实现清除浮动效果 */ overflow: hidden; } .news img { float: left; width: 700px; } .news h1 { float: right; } </style> </head> <body> <div class="news"> <img src="../image/img.jpg" /> <h1>some text</h1> </div> </body></html>

优势：简便易行，代码紧凑，广泛浏览器兼容。

劣势：不适用于容器高度固定的情况，可能导致内容溢出而被隐藏。

🌰3. 使用 CSS 的 :after 伪元素清除浮动

通过添加 :after 伪元素，可以轻松实现浮动清除效果。以下是示例代码：

<!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>使用 CSS 的 `:after` 伪元素清除浮动</title> <style> .news { background-color: #ff4757; border: solid 1px #eccc68; width: 1000px; margin: 0 auto; } .news img { float: left; width: 700px; } .news h1 { float: right; } /* 为父容器添加一个 class */ .clearfix:after { content: ''; display: block; height: 0; clear: both; visibility: hidden; } </style> </head> <body> <div class="news clearfix"> <img src="../image/img.jpg" /> <h1>some text</h1> </div> </body></html>