浮动

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

常规流
浮动
定位

应用场景

文字环绕
横向排列

浮动的基本特点

修改float属性值为：

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

float的默认值为none，即不浮动

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

盒子尺寸

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

盒子排列

左浮动的盒子靠上靠左依次排列
右浮动的盒子考上靠右依次排列
浮动盒子在包含块中排列时，会避开常规流块盒
常规流块盒在排列时，无视浮动盒子
行盒在排列时，会避开浮动盒子
外边距合并不会发生

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

高度坍塌

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

解决办法为清除浮动，涉及的css属性：clear

默认值：none
left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方

高度坍塌的两种解决方式：（常用第二种）

<head>
...
    <style>
        .container {
            background: lightblue;
            padding: 30px;
        }

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

        /* 在浮动盒子的最后再加上一个元素，清除左右浮动 */
        .clearfix{
            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="clearfix"></div>
    </div>
</body>

<head>
...
    <style>
        .container {
            background: lightblue;
            padding: 30px;
        }

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

    /* 加上一个伪元素选择器，内容为空，设置为块盒，清除左右浮动 */
        .clearfix::after {
            content: "";
            display: block;
            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>
</body>

一个特殊的伪类选择器

:nth-child($)
.parent:nth-child($)
选中parent的第$个子元素

$=2n

选中parent的子元素中的第双数个子元素

$=2n+1

选中parent的子元素中的第单数个子元素

一个特殊的伪元素选择器

::first-letter

选中该元素的第一个文字

定位

定位：手动控制元素在包含块中的精准位置

涉及的CSS属性：position（位置）

position属性

默认值：static，静态定位（不定位）
relative：相对定位
absolute：绝对定位
fixed：固定定位

一个元素，只要position的取值不是static，认为该元素是一个定位元素。

定位元素会脱离文档流（相对定位除外）

一个脱离了文档流的元素：

文档流中的元素摆放时，会忽略脱离了文档流的元素
文档流中元素计算自动高度时，会忽略脱离了文档流的元素

相对定位relative

不会导致元素脱离文档流，只是让元素在原来位置上进行偏移。

可以通过四个CSS属性对设置其位置：

left
right
top
bottom

相对定位下，盒子的偏移不会对其他盒子造成任何影响。

避免同时设置有冲突的值，上下矛盾以上为准，左右矛盾以左为准

绝对定位absolute

宽高为auto，盒子尺寸适应内容
包含块变化：找其祖先元素中的第一个定位元素，该祖先元素的填充盒就为其包含块。若找不到，则它的包含块为整个网页（初始化包含块）

在绝对定位中，left、right、top、bottom指的是该元素与其包含块之间的距离

绝对定位默认情况下会覆盖常规流

固定定位fixed

其他情况和绝对定位完全一样，只有包含块不同。

固定定位的包含块固定为视口（浏览器的可视窗口）

定位下的居中

左右（上下）方向居中：

定宽（高）
将左右（上下）距离设置为0
将左右（上下）margin设置为auto

绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间

多个定位元素重叠时

堆叠上下文

多个元素重叠时，可以设置z-index，通常情况下，该值越大越靠近用户

只有定位元素设置z-index有效

z-index可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖

补充

绝对定位、固定定位元素一定是块盒
绝对定位、固定定位元素一定不是浮动
绝对定位、固定定位元素没有外边距合并

前端学习-day5

浮动