CSS浮动是一种布局方式,它可以让元素在文档流中脱离出来,向左或向右移动,直到它们的边缘碰到它们所处的父容器或另一个浮动元素的边缘。
CSS浮动的使用场景通常是为了实现图文混排或多栏布局等效果。可以使用float属性设置元素的浮动方向,常用的值有left和right。
例如,下面的代码将实现一个简单的图文混排效果,其中图片浮动到左侧,文本则紧随其后:
<divclass="container">
<imgsrc="example.jpg"alt="example">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas hendrerit libero sed dolor bibendum, non pellentesque eros malesuada.</p>
</div>
<style>
.container {
width: 600px;
}
img {
float: left;
margin-right: 10px;
}
p {
margin: 0;
}
</style>
除了浮动元素本身,它的父容器和兄弟元素的布局也会受到影响。当多个元素浮动时,它们会按照先后顺序一起浮动,并在父容器内形成一个浮动流。父容器的高度将无法自适应,这时就需要使用clear属性来清除浮动。
clear属性用于指定元素下面的浮动元素是否被允许。常用的值有left、right和both。left表示只清除左侧的浮动元素,right表示只清除右侧的浮动元素,both表示清除左右两侧的浮动元素。
清除浮动是为了解决浮动元素带来的布局问题。在使用浮动元素时,由于浮动元素脱离了文档流,容易对其他元素造成影响,导致布局混乱。因此需要使用一些技巧来清除浮动。
一般来说,清除浮动的方法有两种:使用清除浮动的样式和使用包含浮动的父元素。
使用清除浮动的样式
在 CSS 中,可以使用 clear 属性来清除浮动。clear 属性可以设置在需要清除浮动的元素上,或者在需要容纳浮动元素的父元素上。
下面是一个例子,其中的浮动元素需要使用清除浮动的样式:
<divclass="container">
<divclass="float-left"></div>
<divclass="float-right"></div>
<divclass="clearfix"></div>
</div>
.container{
background-color: pink;
}
.float-left {
float: left;
width: 50%;
height: 200px;
background-color: #ccc;
}
.float-right {
float: right;
width: 50%;
height: 200px;
background-color: transparent;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
清除前,尽管第二个div是透明的看不到粉色的父元素,container父元素几乎消失了,因为子元素浮动导致父元素失去了高度
清除后就看的到了
使用包含浮动的父元素
另一种清除浮动的方法是将包含浮动元素的父元素设置为 overflow: hidden 或 overflow: auto。这是因为当父元素设置了 overflow 属性时,该元素会创建一个 BFC(块级格式上下文),从而可以包含其子元素的浮动。
例如:
<divclass="container">
<divclass="float-left"></div>
<divclass="float-right"></div>
</div>
cssCopycode.float-left {
float: left;
width: 50%;
height: 200px;
background-color: #ccc;
}
.float-right {
float: right;
width: 50%;
height: 200px;
background-color: #eee;
}
.container {
overflow: hidden;
}
在上面的示例中,浮动元素的父元素设置了 overflow: hidden,从而包含了其子元素的浮动。这样可以保持页面的布局整洁。