bootstrap 右浮动_Bootstrap的Float浮动属性

最新推荐文章于 2024-08-30 12:04:41 发布

读库御宅学

最新推荐文章于 2024-08-30 12:04:41 发布

阅读量3.7k

点赞数

文章标签： bootstrap 右浮动

本文链接：https://blog.csdn.net/weixin_29382705/article/details/113534754

版权

这篇博客介绍了如何在Bootstrap中实现响应式浮动和清除浮动。内容包括使用float响应式样式在不同设备断点上切换浮动效果，以及通过clearfix类来清除容器内的浮动内容，确保元素正确换行显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用我们的响应式float浮动通用样式，能在任何设备断点（浏览器尺寸）上切换浮动。

class	描述
.float-left	左浮动
.float-right	右浮动
.float-none	不浮动

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title></title>
	<style>
		.f div div,.pos div {
			width: 5rem;
			height: 5rem;
			background: #ccc;
		}
		.pos div{
			background: wheat;
			border: 1px solid #000;
		}
		body{
			height: 5000px;
		}
	</style>
</head>

<body>
	<div class="container">
		<!-- 浮动 -->
		<div class="row border f">
			<div class="col">
				<!-- 3.x的版本里的浮动是.pull-left/.pull-right -->
				<div class="float-left">左浮动</div>
				<div class="float-right">右浮动</div>
				<div class="float-left float-none">不浮动</div>
			</div>
		</div>
	</div>
</body>

</html>

响应式的浮动，float-{breakpoint}-*:

class
.float-sm-left / right / none
.float-md-left / right / none
.float-lg-left / right / none
.float-xl-left / right / none

清除浮动 clearfix

通过添加.clearfix实用程序，快速轻松地清除容器内浮动的内容（使元素换行呈现）。

float类样式是通过添加.clearfix到父元素上来达达到清除目标。

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title></title>
	<style>
		.f div div,.pos div {
			width: 5rem;
			height: 5rem;
			background: #ccc;
		}
		.pos div{
			background: wheat;
			border: 1px solid #000;
		}
		body{
			height: 5000px;
		}
	</style>
</head>

<body>
	<div class="container">
		<!-- 清除浮动,clearfix -->
		<div class="row d-block border mt-1 clearfix">
			<div class="float-left" style="width: 100px;height: 100px;background: #ccc;">左浮动</div>
			<div class="float-right" style="width: 100px;height: 100px;background: #ccc;">右浮动</div>
		</div>
	</div>
</body>

</html>

没有清除浮动之前

清除浮动之后