Yan Home

Appearance

浮动 ​

视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

  1. 常规流
  2. 浮动
  3. 定位

应用场景 ​

  1. 文字环绕
  2. 横向排列

浮动的基本特点 ​

修改float属性值为：

  • left：左浮动，元素靠上靠左
  • right：右浮动，元素靠上靠右

默认值为none

  1. 当一个元素浮动后，元素必定为块盒(更改display属性为block)
  2. 浮动元素的包含块，和常规流一样，为父元素的内容盒

盒子尺寸 ​

以下都是针对浮动元素而言：

  1. 宽度为auto时，适应内容宽度
  2. 高度为auto时，与常规流一致，适应内容的高度
  3. margin为auto，为0.
  4. 边框、内边距、百分比设置与常规流一样

盒子排列 ​

  1. 左浮动的盒子靠上靠左排列
  2. 右浮动的盒子考上靠右排列
  3. 浮动盒子在包含块中排列时，会避开常规流块盒(即会排列在常规流后方)
  4. 常规流块盒在排列时，无视浮动盒子(即浮动元素飘在天上)
  5. 行盒在排列时，会避开浮动盒子(图片环绕的原理，当在一个块元素中有文字，浏览器会自动加一个隐士的行盒。)
  6. 外边距合并不会发生

如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒。

高度坍塌 ​

高度坍塌的根源：常规流盒子的自动高度，在计算时，不会考虑浮动盒子

清除浮动，涉及css属性：clear

  • 默认值：none
  • left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
  • right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
  • both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方
html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            background: lightblue;
            padding: 30px;
        }

        .item {
            width: 200px;
            height: 200px;
            background: red;
            margin: 6px;
            float: left;
        }

        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="container clearfix">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
         <div class="clear"></div>    <!-- 必须排列在浮动元素的下方 -->
    </div>
</body>

</html>

清除浮动的最佳实践 ​

css
 /* 使用伪元素来清除浮动 */
.clearfix::after{
    content:"";
    display:"block";
    clear:"both";
}

MIT License

Copyright © 2024-present Yan