CSS 清除浮动

飞仔FeiZai 2023-03-28 原文

在元素设置浮动（float）后，该元素就会脱离文档流，并且向左或向右浮动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。

一、浮动元素对布局的影响

1.1、浮动元素造成父元素的高度塌陷：

原来的父元素高度是内部元素撑开的，但是当内部元素浮动后，脱离文档流浮动起来，那父元素的高度就坍塌，变为高度 0px。

<style>
    .container {
        border: 1px solid blue;
    }
    
    .box {
        width: 100px;
        height: 100px;
        margin: 10px;
        background-color: red;
        float: left;
    }
</style>

<div class="container">
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
</div>

上述代码中 container 元素的高度将会是 0px。

1.2、浮动元素对邻近非浮动元素造成影响：

<style>
     .container {
         border: 1px solid blue;
     }
    
     .box0 {
         width: 100px;
         height: 100px;
         margin: 10px;
         background-color: red;
         float: left;
     }
    
     .box1 {
         width: 200px;
         height: 200px;
         background-color: green;
     }
</style>

<div class="container">
     <div class="box0"></div>
     <div class="box0"></div>
     <div class="box0"></div>
     <div class="box1"></div>
</div>

上述代码中 box1 的位置受到前面元素浮动的影响，而且不管 box1 是在 container 里面还是外面都会受到影响。

二、清除浮动（解决浮动元素影响邻近非浮动元素问题）

CSS 清除浮动是指在使用浮动布局时，解决浮动元素对非浮动元素的影响的问题。

当元素设置为浮动时，它会从文档流中“漂浮”出来，不再占据原来的空间，导致后面的元素不能正确地换行显示。为了解决这个问题，需要使用清除浮动的方法。

常见的清除浮动方法有以下几种：

1、在浮动元素后添加一个空的容器，并给该容器设置 clear 属性：

<div style="position: relative;">
  <div style="float: left;">...</div>
  <div style="float: left;">...</div>
  <div style="clear: both;"></div>
</div>

2、给父元素设置 overflow 属性：

<div style="overflow: hidden;">...</div>

3、使用伪元素：

.clearfix::after {
   content: "";
   display: table;
   clear: both;
}

将以上代码添加到需要清除浮动的元素的 CSS 中，并在 HTML 中将该元素的 class 设置为 clearfix。这样，就可以通过使用伪元素清除浮动了。

4、使用 CSS flex 布局：

在使用 CSS flex 布局时，父元素默认会包含所有的子元素，因此不需要进行清除浮动。

<div style="display: flex;">
  <div style="float: left;">...</div>
  <div style="float: left;">...</div>
</div>

5、使用 CSS grid 布局：

在使用 CSS grid 布局时，父元素默认会包含所有的子元素，因此不需要进行清除浮动。

<div style="display: grid;">
  <div style="float: left;">...</div>
  <div style="float: left;">...</div>
</div>

上是 CSS 清除浮动的常见方法，需要根据具体的使用场景和需求来选择最适合的方法。

三、解决浮动元素造成父元素高度塌陷问题

在开发过程中，有时需要解决浮动元素对父元素高度的影响，这时也可以使用以下方法解决：

1、使用绝对定位：

通过将浮动元素设置为绝对定位，可以避免浮动元素对父元素高度的影响。

<div style="position: relative;">
  <div style="position: absolute;">...</div>
  <div style="position: absolute;">...</div>
</div>

2、使用 table 布局：

通过将父元素设置为表格布局，可以避免浮动元素对父元素高度的影响。

<div style="display: table;">
  <div style="display: table-cell;">...</div>
  <div style="display: table-cell;">...</div>
</div>

这些方法可以帮助解决浮动元素对父元素高度的影响问题，但是需要根据具体的使用场景和需求来选择最适合的方法。

有关CSS 清除浮动的更多相关文章

ruby - capybara field.has_css?匹配器 - 2
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？最佳答案通过JonasNicklas得到了答案:No
ruby - 如何在 Ubuntu 中清除 Ruby Phusion Passenger 的缓存？ - 2
我试过重新启动apache，缓存的页面仍然出现，所以一定有一个文件夹在某个地方。我没有“公共(public)/缓存”，那么我还应该查看哪些其他地方？是否有一个URL标志也可以触发此效果？最佳答案您需要触摸一个文件才能清除phusion，例如:touch/webapps/mycook/tmp/restart.txt参见docs 关于ruby-如何在Ubuntu中清除RubyPhusionPassenger的缓存？，我们在StackOverflow上找到一个类似的问题：
css - 用 watir 检查标签类？ - 2
我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。最佳答案试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes
ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2
我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1
ruby-on-rails - Rails - 理解 application.js 和 application.css - 2
rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:
ruby-on-rails - 清除 GitLab 中的所有 Assets - 2
我想在我公司安装的GitLab中使用自定义Logo-白色、Logo-黑色和网站图标。我用谷歌搜索了我的屁股并尝试了所有我能找到的方法来清除这些该死的图像，但似乎没有任何效果。这是唯一似乎成功运行但未删除图像的进程:bundleexecrakecache:clearRAILS_ENV=productionservicegitlabstopredis-cliFLUSHALLbundleexecrakeassets:precompileRAILS_ENV=productionservicegitlabstart然后我清除我的浏览器缓存并转到该域，再次出现相同的该死的图像!我什至删除了我能从应
css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2
我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30
css - rails 萨斯 : variables are not passed with @import - 2
我有一个使用twitterbootstrap和sass的Rails元素。scss文件结构化到文件夹中，所以我有更好的概述。现在我想为包含我的颜色等的全局变量定义一个文件，并将这些值传递给其他文件，这样我就有更少的冗余代码。虽然所有代码都已正确导入和应用，变量不起作用。这是当前的设置:样式表/application.css.scss/**=require_self*=require_tree*//*stylesheets/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules||–componen
css - Jekyll 和自定义 CSS - 2
有没有一种方法可以在jekyll站点中包含自定义css标签，同时将markdown用于入口文件？例如，当我想突出显示某个段落时？最佳答案 Markdown和YAMLFrontMatter都内置了这个。但你可以自己制作。比如说，您有foo.css想要包含在某些帖子中。在_posts/2013-02-03-higligting-foo.markdown中:---css:footitle:"DrupalImagecachesecurityvulnarabilitywithDDOSattackexplained"tags:[drupal,
ruby-on-rails - RailsTutorial - 第 8.4.3 章 - 在集成测试中添加用户后未清除测试数据库 - 2
我被这个难住了。到目前为止教程中的一切都进行得很顺利，但是当我将这段代码添加到我的/spec/requests/users_spec.rb文件中时，事情开始变得糟糕:describe"success"doit"shouldmakeanewuser"dolambdadovisitsignup_pathfill_in"Name",:with=>"ExampleUser"fill_in"Email",:with=>"ryan@example.com"fill_in"Password",:with=>"foobar"fill_in"Confirmation",:with=>"foobar"cl

CSS 清除浮动

有关CSS 清除浮动的更多相关文章

随机推荐