You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
|
<title>清除浮动</title>
|
|
|
|
|
|
<base href="/" />
|
|
|
|
|
|
<link rel="icon" type="image/png" href="favicon.png" />
|
|
|
|
|
|
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
|
|
|
|
|
|
<link rel="stylesheet" href="css/app.css" />
|
|
|
|
|
|
<script src="/plugs/holder/holder.min.js"></script>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<div class="card mt-3">
|
|
|
|
|
|
<div class="card-header .bg-dark-subtle">
|
|
|
|
|
|
<strong>清除浮动: </strong>通过添加 clearfix 工具类，可以快速轻松地清除容器中浮动的内容。
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
|
<h4>为父级元素 添加 .clearfix 类可以很容易地清除内部的浮动。还可以作为 mixin 使用</h4>
|
|
|
|
|
|
<div class="clearfix border border-2 rounded-2 p-3 bg-body-secondary">
|
|
|
|
|
|
<div class="clearfix">...</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
|
<h4>引用该 mixin 的源码</h4>
|
|
|
|
|
|
<div class="clearfix border border-2 rounded-2 p-3 bg-body-secondary">
|
|
|
|
|
|
@mixin clearfix() {
|
|
|
|
|
|
&::after {
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
clear: both;
|
|
|
|
|
|
content: "";
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
|
<h4>在 SCSS 中作为 mixin 使用：</h4>
|
|
|
|
|
|
<div class="clearfix border border-2 rounded-2 p-3 bg-body-secondary">
|
|
|
|
|
|
.element { @include clearfix;}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
|
<h4>.clearfix 的用法: 如果没有 .clearfix ，父级<code><div></code>元素是无法覆盖住两个按钮的，从而导致布局被破坏。</h4>
|
|
|
|
|
|
<div class="bg-info clearfix">
|
|
|
|
|
|
<button type="button" class="btn btn-secondary float-start">向左浮动（float）的示例按钮</button>
|
|
|
|
|
|
<button type="button" class="btn btn-secondary float-end">向右浮动（float）的示例按钮</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script src="jquery/jquery-3.6.4.min.js"></script>
|
|
|
|
|
|
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
|
|
|
|
<script src="js/app.js"></script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
