浮动、清除浮动和BFC

Thu, 10 Oct 2024 00:00:00 +0800

浮动、清除浮动和BFC是前端开发中常见的概念，它们对于页面布局及美化至关重要。

浮动

在网页设计中，浮动是一种常见的布局技术，可以让元素脱离文档流，我们来看看它有什么作用吧！

使文字环绕

代码示例如下：

html结构：

<div class="box"></div>
<div class="text">一段文字</div>

css样式：

 .box{
 width: 200px;
 height: 200px;
 background-color: coral;
 }

若不加浮动，则页面是这样的效果：

但若是在box加上float: left;(向左浮动)，则能使文字环绕box这个盒子：

 .box{
 width: 200px;
 height: 200px;
 background-color: coral;
 float: left;
 }

让块级元素同行显示

块级元素本身是占据一整行的，但浮动能让多个块级元素处于同一行，示例如下：

若不加浮动，则多个块级元素各自占据一行：

html结构：

 <ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 </ul>

css样式：

 *{
 margin: 0;
 padding: 0;
 }
 ul li{
 list-style:none;
 width: 200px;
 height: 100px;
 font-size: 16px;
 }
 li:nth-child(1){/*子容器选择器 */
 background-color: rgb(227, 149, 149);
 }
 li:nth-child(2){
 background-color: rgb(205, 139, 197);
 }
 li:nth-child(3){
 background-color: rgb(145, 212, 227);
 }

页面如图：

浮动、清除浮动和BFC on Last Stand

浮动、清除浮动和BFC

浮动