前言
浮动作为CSS里一个基本的概念，但是在面试过程中，如果面试官问你有关于CSS方面的问题的话，那么浮动出现的概率非常大，今天我们就一起来把浮动搞清楚，面试碰到此类问题再也不用发愁了。
三大元素
在我们开始讲浮动之前，我先来给小伙伴们讲讲块级元素，行内元素，行内块级元素，以便大家更好的理解
块级元素：
- 默认占据一整行：块级元素在页面上占据一整行，它们会自动换行，每个块级元素从新的一行开始。
- 可以设置宽高：你可以为块级元素指定宽度和高度，以控制它们的尺寸和形状。
行内块元素：
- 可以同行显示：行内块元素可以在同一行上并排显示，它们不会强制换行，允许其他元素在同一行内显示。
- 可以设置宽高：与块级元素类似，行内块元素也可以设置宽度和高度，因此你可以控制它们的大小和形状。
行内元素：
- 可以同行显示：行内元素默认会在同一行上显示，它们不会强制换行，允许其他元素在同一行内显示。
- 不可以设置宽高：与块级元素和行内块元素不同，行内元素不允许直接设置宽度和高度。它们的大小通常由其内容的宽度和高度决定，但可以通过其他方式（例如
padding和margin）间接影响它们的尺寸。
浮动的概念与特性
- 概念
浮动是CSS属性，用于控制元素在水平方向上的布局和定位。它使元素能够向左或向右浮动，并允许其他内容环绕它。通常用于创建文字环绕图像、多列布局和导航菜单等。例如，我们想使一个元素向左浮动：
.element { float: left; }
- 浮动特性
- 文字环绕
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .img{ width: 100px; height: 100px; background-color: red; /* float: left; */ } </style> </head> <body> <div class="img"></div> <div class="text">在人生的每个阶段，我们都对漫漫前程抱着一份激动的希望，以为奇迹就在前方。 然而，人生只是一个个梦想不断破灭的过程。 而当我们走出所有曲折的日子时才发现， 真正的美好与神奇，已经永远地留在了背后。</div> </body> </html>
这是效果
如果我们想将图像或其他元素放置在文本的旁边，可以在.img中加入float: left,这样就可以实现文字环绕的效果啦
- 让块级元素同行显示
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 100px; height: 100px; /* float: left; */ } .item1{ background-color: red; } .item2{ background-color: blueviolet; } .item3{ background-color:greenyellow ; } </style> </head> <body> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> </body> </html>
因为div是块级元素，一个div元素占据一整行，所以，三个item分行显示 
如果我们想要他们同行显示，可以在div容器里面加入 float: left,浮动可以让元素脱离文档流，这样就可以让他们同行显示啦
- 文档流：决定了元素在页面中的位置和布局， 元素在文档流中垂直排列，即一个元素会在前一个元素下方。 当页面宽度不足以容纳块级元素时，它们会自动换行到下一行。当页面宽度不足以容纳块级元素时，它们会自动换行到下一行。
但是我们发现了一个问题
父容器body的高度变成0了！这里我们称之为父容器塌陷。
- 让行内元素可以设置宽高
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container{ width: 100%; height: 200px; background-color: green; } span{ width: 100px; height: 100px; /* float: left; */ background: red; margin: 5px; /* 添加间距以使它们不紧密排列 */ } </style> </head> <body> <div class="container"> <span>来颗</span><span>奇趣蛋</span> </div> </body> </html>
上面我们介绍过了，span是行内元素，行内元素是不能设置宽高的，所以效果应该如下 
如果我们想设置行内元素的宽高，可以在行内元素里面加入float: left,效果如下
- 可以使用margin 但是不能使用 margin: 0 auto;
如果我们想要使用margin: 0 auto将两个span居中，我们就不能使用float : left,这也是浮动元素的一个特性之一。将span设置为块级元素，使用margin: 0 auto
span{ width: 100px; height: 100px; /* float: left; */ margin: 0 auto; display: block; background: red; }
清除浮动
浮动在网页布局中是一个有用的工具，但它也可能引发一些不良影响，特别是在不正确使用时。就比如上述第二点，父容器高度塌陷，当我们在计算高度之类的问题时可能会出现问题。 清除浮动（Clearing Floats）是一种在使用CSS浮动布局时经常需要采用的技术，主要是为了解决由浮动元素可能引发的一些常见问题。
- 防止父元素坍塌（Collapsing Parent） ：当父元素包含浮动元素时，父元素可能会"坍塌"，导致高度计算不准确。清除浮动可以确保父元素包含浮动元素，使其高度得以正确计算，而不塌陷。
- 避免影响其他元素（Avoid Impact on Other Elements） ：浮动元素可能会影响其他元素的布局，特别是文本环绕浮动元素时。清除浮动可以确保元素不受浮动元素的影响，使布局更可控。
这里我们有几个方法可以清除浮动
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0;padding: 0; } ul li{ list-style: none; width: 200px; height: 100px; float: left; } li:nth-child(1) { background: #da8383; } li:nth-child(2) { background: #e1e941; } li:nth-child(3) { background: #6ceb50; } .text{ width: 100px; height: 150px; background: #2d3bda; } </style> </head> <body> <div class="container"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <div class="text">Hello World</div> </div> </body> </html>
我们发现了这样一个问题，text原本的高度被ul li 浮动元素覆盖掉了，这样导致了我们的布局出现了问题，我们可以用下面几种方法来解决
- 给父容器设置高度
这个办法很简单，但是这样布局不会考虑用户观看时使用的屏幕大小，就比如用户用电脑看和手机看，页面都是一样大小。一般不使用这个办法。
- 在最后一个浮动元素之后添加新的元素，在新元素上做 清除浮动
在最后一个浮动元素<li>3</li>的后面添加新的元素，给新元素做clear: left，若是右浮动，则clear: right,若两边浮动都有,则clear:both
//CSS .clear-float { clear: left; /* 清除浮动 */ } <div class="container"> <ul> <li>1</li> <li>2</li> <li>3</li> <div class="clear-float"></div> </ul> <div class="text">Hello World</div> </div>
但是如果使用浮动元素很多的情况下，要设置很多新的元素，代码会繁琐很多，一般不使用此方法
- 在下方被浮动影响的容器上做 清除浮动
.text{ width: 100px; height: 150px; background: #2d3bda; clear: left; }
代码实现效果一样
一般也不使用此操作，每个容器都添加，也会十分繁琐
- 在父容器伪元素after上做 清除浮动
.clear::after{ content: ''; clear: both; display: block; } <div class="container"> <ul> <li>1</li> <li>2</li> <li>3</li> <div class="clear"></div> </ul> <div class="text">Hello World</div> </div>
这个办法使用伪元素的特点，是一个好办法
- BFC
这也是一个很不错的方法，今天内容已经很多了，小伙伴消化一下，我们留着下次再介绍吧。
今天的内容就到这啦，如果你觉得小编写的还不错的话，或者对你有所启发，请给小编一个辛苦的赞吧
