草庐IT

清除浮动

咕德猫宁 2023-03-28 原文

什么是浮动元素

浮动元素会根据属性值向左或向右浮动，浮动元素会脱离普通文档流，进入浮动流，浮动流内的浮动元素可以左右移动，直至外边缘碰到包含块或其他浮动元素，会使得块级元素无视浮动元素且行内元素环绕浮动元素

  • 观察几种浮动实例
<div class="container">
  <div class="box1">float1</div>
  <div class="box2">float2</div>
</div>

1.box1,box2全部左浮


image.png

2.box1,box2全部右浮


image.png

3.box2左浮
image.png

4.文字环绕

<div class="box">
  <div class="img"></div>
  <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>
</div>
image.png

清除浮动

  • 为什么需要清除浮动呢？
    因为浮动元素的特性，有时候会带来一些问题
    比如：margin重叠；无法撑开父元素高度；与浮动元素同级的非浮动元素会紧随其后，因为浮动元素脱离文档流，不占据文档流中的位置；可能影响页面结构等
  • 清除浮动的方式

1.BFC

margin重叠场景

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

.box1 {
  width: 100px;
  height: 100px;
  margin-bottom: 100px;
  background-color: rgb(182, 46, 46);
}

.box2 {
  width: 100px;
  height: 100px;
  margin-top: 200px;
  background-color: rgb(39, 153, 66);
}
image.png

box1的margin-bottom为100px,box2的margin-top为200px，总margin应为300px,但现在只有200px，我们发现发生了margin重叠的问题，怎么解决呢，我们可以创建一个BFC,BFC就是页面上的一个独立容器，容器里面的子元素不会影响外面元素，同样外面的元素不会影响到BFC内的元素,我们让box1处于一个BFC中
解决：

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

.box {
  overflow: hidden; /* 创建一个bfc */
}
image.png

2.clear属性的空标签(不推荐使用)

//css
.box1,.box2,.box3 {
  float: left;
}
.box {
  width: 300px;
  border: 5px solid #000;
}
<div class="box">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

image.png

在浮动元素后面设置一个空标签，并设置clear: both;

<div class="box">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="clear"></div>
</div>

//css
.clear {
  clear: both;
}
image.png

原理：添加一个空标签，利用CSS提高的clear:both清除浮动，让父元素可以自动获取到高度
优点：简单，代码少，兼容所有浏览器
缺点：增加页面的标签，造成结构的混乱

3.:after伪元素

给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素之后添加一个看不见的块元素清理浮动

<div class="box clearfix">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

//css
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
image.png
清除浮动sectiondivclass

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

  1. ruby - 如何在 Ubuntu 中清除 Ruby Phusion Passenger 的缓存？ - 2

    我试过重新启动apache，缓存的页面仍然出现，所以一定有一个文件夹在某个地方。我没有“公共(public)/缓存”，那么我还应该查看哪些其他地方？是否有一个URL标志也可以触发此效果？ 最佳答案 您需要触摸一个文件才能清除phusion，例如:touch/webapps/mycook/tmp/restart.txt参见docs 关于ruby-如何在Ubuntu中清除RubyPhusionPassenger的缓存？，我们在StackOverflow上找到一个类似的问题：

  2. ruby-on-rails - 清除 GitLab 中的所有 Assets - 2

    我想在我公司安装的GitLab中使用自定义Logo-白色、Logo-黑色和网站图标。我用谷歌搜索了我的屁股并尝试了所有我能找到的方法来清除这些该死的图像，但似乎没有任何效果。这是唯一似乎成功运行但未删除图像的进程:bundleexecrakecache:clearRAILS_ENV=productionservicegitlabstopredis-cliFLUSHALLbundleexecrakeassets:precompileRAILS_ENV=productionservicegitlabstart然后我清除我的浏览器缓存并转到该域，再次出现相同的该死的图像!我什至删除了我能从应

  3. 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

  4. ruby - 清除输入字段并使用 Watir 输入新信息？ ( ruby ，瓦蒂尔) - 2

    非常肯定你必须使用.clear，或者可能不使用，因为它似乎对我不起作用，也许我只是实现错误我不确定。例子:browser.div(:id=>"formLib1").clear.type("input","hi")谁能告诉我如何简单地清除一个字段然后输入一个新字符串？ 最佳答案 假设我们正在谈论一个文本字段(即您不是要清除/输入一个div标签)，.set()和.value=方法在输入值之前自动清除文本字段。因此以下方法之一可行:browser.text_field(:id,'yourid').set('hi')browser.text

  5. ruby - 从数组中清除空字符串 - 2

    我正在处理一堆由字符串组成的数组，我已经写了很多次.delete_if{|str|海峡空？现在，我知道我可以自己将此方法添加到数组类中，但我希望有一种内置方法可以做到这一点，而无需将非标准方法添加到基类中。尽管向基类添加方法很有趣，但出于可维护性原因，我不想这样做。是否有内置方法来处理此问题？ 最佳答案 有一个简短的形式array.delete_if(&:empty?) 关于ruby-从数组中清除空字符串，我们在StackOverflow上找到一个类似的问题：

  6. ruby-on-rails - 如何清除 Rails 控制台历史记录 - 2

    当我运行railsc并在irb启动时按下向上键时，我可以看到我的应用在遇到调试器后掉到irb时输入的最后命令ruby-debuggem的命令。我不仅想清除这些命令，而且我希望railsc能够提取我在上次Rails控制台session期间发出的最后命令。我认为它曾经是这样做的，但我不确定发生了什么变化。如果有帮助，我在MacOS10.6.5上使用ruby​​1.8.7和rails3.0.3。更新Ray的answer在此期间帮助了我。最近，我进行了更多挖掘以了解更多信息，并意识到存在许多相互矛盾的问题。IRB检查您是否有~/.irbrc，如果没有，则返回到/etc/irbrc，如Ray所述

  7. ruby-on-rails - 重命名 Rails 中的 Controller 并清除生成的内容 - 2

    我一直在关注关于restful_authentication插件的railscast。他建议运行命令:脚本/生成经过身份验证的用户session我这样做了，一切都“很好”，但随后session将无法正常工作。再次检查该站点，他提到了一个命名标准并列出了更新的代码，其中声明:脚本/生成经过身份验证的用户sessionsession多元化。所以现在我有session_controller.rb，里面有一个SessionController，但我猜按照命名标准，它正在寻找SessionsController，导致代码失败并出现错误“NameErrorinSessionsController#

  8. ruby - 什么是受污染的对象，我们什么时候应该清除它们？ - 2

    Ruby对象什么时候需要被污染，什么时候应该取消污染？受污染对象的概念如何使Ruby脚本在安全模式下运行？任何人都可以详细说明这一点以通过一些代码片段使概念清晰吗？ 最佳答案 什么是污染？根据定义，用户输入被污染了。例如:string=getsstring.tainted?#=>true您还可以手动污染对象。string='Notyettainted.'string.tainted?#=>false(string='Explicitlytaintme!').taintstring.tainted?#=>true为什么要清除对象的污点

  9. ruby - 如何有效地清除 Ruby 的负零 float ？ - 2

    在Ruby中，0.0*-1==-0.0。我有一个应用程序，我将一堆Float对象与-1相乘，但我不喜欢-0.0输出，因为它令人困惑。是否有一种聪明的方法可以使Float#to_s输出0.0而不是-0.0？我完全可以通过某种清理器/辅助方法运行每个Float对象，但以下只会让我更加困惑:defclean_output(amount)ifamount.zero?0.0elseamountendend更新:为了更准确地说明我在寻找什么，我想要一个可以在一大堆float上运行的解决方案，其中一些是负数，一些是正数。负数应该保持负数，除非它们是负零，即-0.0。例子:clean_output(-

  10. ruby-on-rails - Rails 5 如何清除或删除生产 postgres 数据库 - 2

    我正在尝试删除生产数据库，以便重新开始。当我从rails4升级到rails5时，它现在正在保护生产数据库不被意外删除。它在我运行rakedb:reset时显示以下错误消息。/app#rakedb:resetActiveRecord::SchemaMigrationLoad(1.8ms)SELECT"schema_migrations".*FROM"schema_migrations"(1.6ms)SELECT"ar_internal_metadata"."value"FROM"ar_internal_metadata"WHERE"ar_internal_metadata"."key"=

随机推荐