前言
浮动作为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
这也是一个很不错的方法,今天内容已经很多了,小伙伴消化一下,我们留着下次再介绍吧。
今天的内容就到这啦,如果你觉得小编写的还不错的话,或者对你有所启发,请给小编一个辛苦的赞吧