【CSS】：Floats

WEBJ2EE

发布于 2020-02-26 09:52:46

4770

发布于 2020-02-26 09:52:46

文章被收录于专栏：WebJ2EEWebJ2EE

目录
1. 起源
2. 语法
   2.1. float
   2.2. clear
3. 性质
   3.1. 浮动
   3.2. 清除浮动
4. 经典案例
   4.1. 首字下沉
5. 几道笔试题

1. 起源

最初，引入 float 属性是为了能让 web 开发人员实现文字环绕效果（例如：报纸排版）。

示例：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    body {
      width: 90%;
      max-width: 900px;
      margin: 0 auto;
    }

    p {
      line-height: 2;
      word-spacing: 0.1rem;
    }

    img {
      float: left;
      margin-right: 30px;
    }
</style>
</head>
<body>
  <h1>Simple float example</h1>
  <img src="https://mdn.mozillademos.org/files/13340/butterfly.jpg" alt="A pretty butterfly with red, white, and brown coloring, sitting on a large leaf">
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</body>
</html>

2. 语法

2.1. float

2.2. clear

3. 性质

3.1. 浮动

性质1：使用 CSS 浮动元素的独特之处是，浮动的元素基本上算是处在单独的平面上，但是对文档中其余的内容仍有影响。

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.
If a shortened line box is too small to contain any content, then the line box is shifted downward (and its width recomputed) until either some content fits or there are no more floats present. Any content in the current line before a floated box is reflowed in the same line on the other side of the float.

示例：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    p { 
      width: 10em; 
      border: solid aqua; 
    }

    span { 
      float: left; 
      width: 5em; 
      height: 5em; 
      border: solid blue; 
    }
</style>
</head>
<body>
  <p>
    <span> </span>
    Supercalifragilisticexpialidocious
  </p>
</body>
</html>

性质2：不管元素是什么类型，浮动后得到的都是块级框。

示例：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    #myfloat {
      float: left;
    }
</style>
</head>
<body>
  <span id="myfloat">冰寒雾气弥漫的环境之中，周围白雾弥漫，始终都望不见尽头。</span>
</body>
</html>

性质3：浮动元素四周的外边距不折叠。

示例：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    div {
      width: 100px;
      height: 100px;
      margin: 50px;
      float: left;
    }

    .item1 {
      border: 2px solid blue;
      background-color: grey;
    }

    .item2 {
      border: 2px solid green;
      background-color: purple;
      clear: left;
    }
</style>
</head>
<body>
  <div class="item1">
  </div>
  <div class="item2">
  </div>
</body>
</html>

性质4：浮动元素与常规流动的内容出现重叠时（例如：负外边距）

行内框与浮动元素重叠时，其边框、背景和内容都在浮动元素“之上”渲染。
块级框与浮动元素重叠时，其边框和背景在浮动元素“背后”渲染，而内容在浮动元素“之上”渲染。

示例a：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    .item1{
      width: 100px;
      height: 100px;

      float: left;

      background-color: red;
    }

    .item2{
      margin-left: -50px;

      background-color: green;
    }
</style>
</head>
<body>
  <span class="item1">
    冰寒雾气弥漫的环境之中，周围白雾弥漫，始终都望不见尽头。
  </span>
  <span class="item2"> 
    老人抬头一脸震惊的望着半空中的少年，低喝道：“小子，你这是何种秘法？”
  </span>  
</body>
</html>

示例b ：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    .item1{
      width: 100px;
      height: 100px;

      margin-left: 50px;
      margin-right: -50px;

      float: left;

      background-color: red;
    }

    .item2{
      background-color: green;

      font-weight: bold;
    }
</style>
</head>
<body>
  <div class="item1">
    冰寒雾气弥漫的环境之中，周围白雾弥漫，始终都望不见尽头。
  </div>
  <div class="item2"> 
    老人抬头一脸震惊的望着半空中的少年，低喝道：“小子，你这是何种秘法？”
  </div>  
</body>
</html>

性质5：浮动元素的后代也浮动时，将扩大范围，涵盖浮动的后代元素。

这一条常用于“解决”高度塌陷问题。

示例：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    div {
      border: 2px solid blue;
    }

    p {
      float: left;
    }

    p {
      border: 2px solid red;
      width: 30px;
      height: 30px;
      background-color: grey;
    }
</style>
</head>
<body>
  <div id="mydiv">
    <p>A</p>
    <p>B</p>
    <p>C</p>
  </div>

  <button onclick="mytoggle()">Toggle Div's float</button>

  <script>
    var toggle = true;
    function mytoggle(){
      toggle = !toggle;
      
      var div = document.getElementById("mydiv");
      div.style.cssFloat = toggle ? "left" : "none"; 
    }
</script>
</body>
</html>

性质6：浮动元素的细节规则。

浮动元素的左（或右）外边界不能超过容纳块的左（或右）内边界。
If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.
The right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is next to it. Analogous rules hold for right-floating elements.
浮动元素的顶边不能比父元素的内顶边高。如果浮动元素位于两个折叠的外边距之间，在两个元素之间放置它的位置时，将视其有个块级父元素。

示例：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    p {
      margin: 0;
      border: 2px solid blue;
    }

    p:nth-child(1){
      width: 100px;
    }

    p:nth-child(2){
      float: left;
      background-color: grey;
      border: 2px solid red;
    }
</style>
</head>
<body>
  <p>A</p>
  <p>B</p>
  <p>C</p>
</body>
</html>

The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.

示例：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    div {
      border: 2px solid black;
    }

    .myfloat {
      float:left; 
      
      border:2px solid red; 
      margin: 1em; 
      color: red;
    }
</style>
</head>
<body>
  <div>
  凶魂的逃跑意图，并未实现，纳戒之中的天火尊者似乎对它势在必得一般，奇异强芒暴涌间，吸力成倍翻张，而那凶魂，也是开始传出一阵阵凄厉而惊恐的尖叫之上，身体犹如那被按在石板上即将待宰的野猪一般，拼了命的挣扎。
    望着那死命想要逃窜，但却距纳戒越来越近的凶魂，萧炎心中在欣喜之余，也不免有些震惊，没想到天火尊者在这般状态下，居然还能施展出这么一手，看来他对于自己，是隐瞒了一些东西啊，至少，并非是如同他所说，已经不具备半点自保的能力...
  <span class="myfloat">FLOAT</span>
    能够将一名实力达到斗宗阶别的凶魂这般轻易的制住，萧炎自认是难以达到，虽然这之中不排除是否天火尊者有着一些对付这种凶魂的独有法门，但不管何种法门，也是需要一些保底的力量，所以，虽说如今的天火尊者看似状态很是虚弱，但谁若是真对其心生歹意的话，恐怕倒霉的。只会是他自己...
    就在萧炎心中念头翻转间，那天空上的轩护法，也是对于凶魂此刻的处境有所察觉，当下一声怒吼，手印一动，强横的灵魂力量自黑雾中暴涌而出！
    随着轩护法的插手，那凶魂的抗拒也是越来越强，到得后来，居然是开始逐步的退出那股吸力的吸扯范围！
  </div>
</body>
</html>

A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.
浮动元素必须放在尽可能高的位置上。
左浮动元素必须尽量向左移动，有浮动元素必须尽量向右移动。位置越高，向左或向右移动的距离越远。

3.2. 清除浮动

性质：在 CSS1 和 CSS2 中，clear 起作用的方式是增加元素的上外边距，把元素移到浮动的元素下方。因此，为元素声明的上外边距其实会被忽略。然而，CSS2.1 引入了间距（clearance）这个概念，间距是为了把元素向下移动，确保显示在移动元素的下方而在元素上外边距上方增加的额外留白。这意味着，清除了浮动的元素，其上外边距不再受到影响。

你品，你细品

技巧：借助清除浮动“解决”高度塌陷。

A. 方式1，借助空 div 元素：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    #mydiv {
      border: 2px solid blue;
    }

    p {
      float: left;
    }

    p {
      border: 2px solid red;
      width: 30px;
      height: 30px;
      background-color: grey;
    }

    .clearfix {
      clear: both;
    }
</style>
</head>
<body>
  <div id="mydiv">
    <p>A</p>
    <p>B</p>
    <p>C</p>
    <div class="clearfix"></div>
  </div>
</body>
</html>

B. 方式2，借助 ::after 伪元素，可以省略 html 标记：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    div {
      border: 2px solid blue;
    }

    div::after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }

    p {
      float: left;
    }

    p {
      border: 2px solid red;
      width: 30px;
      height: 30px;
      background-color: grey;
    }
</style>
</head>
<body>
  <div id="mydiv">
    <p>A</p>
    <p>B</p>
    <p>C</p>
  </div>
</body>
</html>

4. 经典案例

4.1. 首字下沉

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    p:first-letter{
      float: left;

      border: 1px solid black;

      padding: 2px;

      font-size: 40px;
      font-weight: bold;
      color: blue;
    }
</style>
</head>
<body>
  <p>
    突如其来的刺眼强光。几乎将那天际之上的阳光给遮掩而去，
    不少人也是因为这般变故而有些愣神，一道道惊疑不定的目光，投向天空。
    萧炎的拳头，与那凶魂悍然相接，但那由白色纳戒之中所爆发而起的奇异强芒，
    却是犹如一层能量罩般，将凶魂拳上的那股可怕劲道，尽数抵御，然后，
    一股强悍的吸力，自其中暴涌而出！
  </p>
</body>
</html>

5. 几道笔试题

题目01：

题目02：

参考：

《CSS 世界》《CSS核心技术详解》《CSS权威指南第四版下册》 Floats： https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats float： https://developer.mozilla.org/en-US/docs/Web/CSS/float clear： https://developer.mozilla.org/en-US/docs/Web/CSS/clear W3C——Floats： https://www.w3.org/TR/CSS22/visuren.html#floats All About Floats： https://css-tricks.com/all-about-floats/ How To Clear Floats Without Structural Markup： http://www.positioniseverything.net/easyclearing.html CSS Float Theory，Things You Should Know： https://www.smashingmagazine.com/2007/05/css-float-theory-things-you-should-know/ The Mystery Of The CSS Float Property： https://www.smashingmagazine.com/2009/10/the-mystery-of-css-float-property/

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-02-22，如有侵权请联系 cloudcommunity@tencent.com 删除

网络安全