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.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
<!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" > 向左浮动（ ） < / button >
< button type = "button" class = "btn btn-secondary float-end" > 向右浮动（ ） < / 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 >