流、元素与基本尺寸

  1. 流：实际上是CSS世界中的一种基本的定位和布局机制，可以理解为现实世界的一套物理规则，流跟现实世界的水流有异曲同工之妙
  2. CSS中的标签种类繁多，但通常我们把他们分为两类：块级元素(block-level element)和内联元素(inline element)

    块级元素

  3. 常见的块级元素有div,li,table等，但需要注意的是块级元素和display属性值为block的元素是不一样的，例如li元素默认display值时list-item,table元素默认的display值是table，但他们均是块级元素(块级元素的基本特征：一个水平流上只显示一个元素，多个块级元素换行显示)。
  4. 由于块级元素具有换行的特性，因此理论上它可以配合clear属性来清除浮动带来的影响
  5. 浮动：元素脱离文档流，使元素在页面中水平排列
    • float可选值如下：
      • none默认值，元素默认在文档流中排列
      • left:元素立即脱离文档流，向页面左侧浮动
      • right:元素立即脱离文档流，向页面右侧浮动
    • 内联元素脱离文档流后会变成块元素
    • 块元素脱离文档流后高度和宽度会被内容撑开
    • 浮动的元素不会盖住文字，文字会自动环绕在浮动元素周围，所以我们可以通过浮动来设置文字环绕图片的效果
    • 如果浮动元素上边是一个没有浮动的元素，则浮动元素不会超过块元素，浮动的元素不会超过他上边的兄弟元素
    • 当一个元素设置为浮动以后(非none值)，元素会立即脱离文档流，脱离之后，它下面的元素会立即向上移动，元素浮动以后，会尽量向元素的左上或者是右上漂浮，直到遇到父元素的边框或者其他的浮动元素。
  6. 消除浮动：
    1
    2
    3
    4
    5
    .clear::after{
                content: "";
                display: block;
                clear: both;
            }
  7. 小案例
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>清除浮动</title>
        <style>
            .box{
                padding: 10px;
                background-color:#cd0000;
            }
            .box > img {
                float:left;
            }
            .clear::after{
                content: "";
                display: block;
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="box clear">
            <img src="../img/1.jpg" alt="功夫熊猫">
        </div>
    </body>
    </html>