前言
浮动布局是CSS中用于创建多列和文本环绕效果的技术。通过设置元素为左浮或右浮,可实现并排显示和内容环绕,适用于多栏布局和图片嵌入文本。虽有局限性,如父元素高度塌陷问题,但结合清除浮动技巧,仍为网页设计提供灵活性和高效性能。
浮动布局的效果
1.实现文字环绕效果
不设置float
标签的情况下:
加上float
标签后
2. 会导致一个元素脱离文档流
我们检查页面元素可以看到p
标签和image
标签重叠了,标签重叠就说明某个标签脱离了文档流。
注意,float
只有left
和right
,没有top
3.可以让块级元素水平排列
li
标签是块级元素,所以它们在页面上的显示不会在同一行
加入float标签后:
三个li
去到了同一行,而且我们查看元素可以发现,ul
是没有高度的,因为ul
里的子标签全部都浮动了,没有元素去撑开ul
,所以高度为0
代码:
<style>
li {
list-style: none;
font-size: 20px;
}
.item{
width: 200px;
height: 50px;
float: left;
}
.item:first-child{
background-color: rgb(149, 74, 74);
}
.item:nth-child(2){
background-color: rgb(71, 71, 139);
}
.item:last-child{
background-color: rgb(73, 148, 73);
}
</style>
</head>
<body>
<ul>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
</ul>
</body>
4.浮动元素可以用 marign, 但是不能使用 margin: 0 auto;
margin: 0 auto;
与浮动元素的冲突
-
浮动元素的特性:浮动元素会脱离正常的文档流,允许其他内容环绕它。
float
属性决定了元素应该向左或向右对齐,而不是居中。 -
margin: 0 auto;
的作用:这个CSS属性是用于在左右两边分配相等的外边距,从而实现水平居中。但是,当元素浮动时,margin: 0 auto;
的效果会被忽略,因为它试图在浮动元素上进行水平居中操作,而这与浮动元素的布局逻辑不符。
示例
<div class="floated">
浮动元素
</div>
floated {
float: left;
width: 200px;
height: 200px;
background-color: lightblue;
margin: 0 auto;
}
在这种情况下,margin: 0 auto;
不会使.floated
元素居中。相反,由于float: left;
的存在,元素会向左浮动,并且margin: 0 auto;
中的auto
值不会被解析为水平居中的指令,而是被视为默认值(即0
),因此margin
实际上等同于margin: 0 0;
。
清除浮动
清除浮动并不是把浮动清除掉,而是解决一些元素在浮动中受到的影响。
以下是几种常用的清除浮动的方法:
- 设置父元素高度
- 在父元素结束之前添加一个空元素,并设置 clear: both;
- 借助伪元素 ::after 清除浮动
- 把父容器设置成 BFC 容器
接下来进行逐一介绍:
1. 设置父元素高度
最简单粗暴的办法就是直接设置父元素宽度:
ul{
height: 50px;//已知li的高度都是50px
}
这种方法并不是真正的“清除浮动”,而是通过给父元素设置一个明确的高度来避免高度塌陷。然而,这种方法不够灵活,因为需要预先知道或计算出确切的高度值。
2. 在父元素结束之前添加一个空元素,并设置 clear: both;
这种方法涉及在浮动元素之后插入一个额外的元素,并设置其clear
属性为both
。这样可以阻止后续元素继续环绕浮动元素,从而间接“清除”浮动的影响。
.clear{
clear: both;
}
<body>
<ul>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<div class="clear"></div>
</ul>
<div class="title">这是标题</div>
</body>
3. 借助伪元素 ::after 清除浮动
这是最常用的方法之一,通过在父元素后添加一个伪元素::after
并设置clear: both;
或display: block; content: "";
以及clear: both;
来清除浮动。通常还需要将父元素设置为相对定位(position: relative;
),以便伪元素能正确工作。
ul::after{
content: '';
clear: both;
display: block;
}
4. 把父容器设置成 BFC 容器
BFC是CSS中的一个概念,用于描述块级元素如何在其内部进行布局。将一个元素设置为BFC容器可以自动清除其内部的浮动。这可以通过overflow
属性设置为auto
、hidden
或scroll
,或者通过display
属性设置为flex
或grid
来实现。
ul{
overflow: auto;
}
结语
以上就是关于浮动和清除浮动的介绍,希望本篇文章对你有所帮助,感谢阅读!