关于浮动

我们为什么需要浮动？

我们想把多个块级元素放到同一行上。 打破标准流的限制。

浮动原来做图文混排效果，现在主要用来做网页布局的。

浮动语法

只有左浮动和右浮动。

float: left;
float: right;

浮动特点

1.浮动元素会脱离标准流（简称：脱标），在标准流中不占位置

2.浮动元素比标准流高出半个级别，可以覆盖标准流中的元素

3.浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

4.浮动元素会受到上面元素边界的影响

5.浮动元素有特殊的显示效果：① 一行可以显示多个 ② 可以设置宽高

盒子阴影：box-shadow

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7HuCmEsk-1669259715857)(D:\前端学习\pink老师基础课\资料\第七天\02-md笔记\assets\1633680973717.png)]

box-shadow: 2px 2px 2px rgb(0,0,0,.2);

---

清除浮动

为什么要清除浮动？

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题
如下:

给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子。

当给内部两个盒子加上float属性的时候，底部的footer盒子就会顶上来（因为浮动元素不占位置），父盒子因为没设置高度，变成一条线。

注意： 清除浮动。

1. 很多情况下，父盒子不方便给高度。
2. 但是如果里面的子盒子浮动了，浮动意味着脱标（脱脱离标准流），脱标意味着不占有位置。
3. 我们期望的是：父盒子不给高度，而是让浮动的子盒子给撑开高度。
4. 此时可以清除浮动： 浮动的子元素也能撑开父盒子。

清除浮动的方法（最常用的4种）

clear: both的具体含义

要求框的顶边框低于在源文档中之前生成的任何浮动框的底外边距边。

1. 额外标签法（隔墙法）

• 在最后一个浮动元素的后面，新加一个 块级元素
• 给这个块级元素添加 clear: both;

    <div class="father">
        <div class="son"></div>
        <div class="son2"></div>
        <div style="clear: both;"></div>
    </div>

        .father {
            width: 1000px;
            background-color: pink;
        }

        .son {
            float: left;
            width: 200px;
            height: 200px;
            background-color: purple;
        }

        .son2 {
            float: left;
            width: 200px;
            height: 100px;
            background-color: red;
        }

        .ershu {
            width: 900px;
            height: 300px;
            background-color: black;
        }

优点： 通俗易懂，书写方便。（不推荐使用）
缺点： 添加许多无意义的标签，结构化比较差。

清除浮动前：
清除浮动后：

2.单伪元素清除浮动

操作：用伪元素替代额外标签，在标签后添加一个块元素

①基本写法

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

②补充写法

.clearfix::after {
    content: '';
    display: block;
    clear: both;
    /* 补充代码，隐藏这个盒子,在网页中看不到这个伪元素 */
    height: 0;
    visibility: hidden;
}

<div class="father clearfix">
    <div class="son"></div>
    <div class="son2"></div>
</div>

优点：项目中使用，直接给标签加类即可清除浮动

3.使用before和after双伪元素清除浮动（较常用推荐）

<div class="father clearfix">
	<div class="son"></div>
	<div class="son2"></div>
</div>
<div class="ershu"></div>

.clearfix::before,
.clearfix::after {
    content: '';
    display: table;
}

.clearfix::after {
    clear: both;
} 

4.给父元素添加overflow

<div class="father clearfix">
	<div class="son"></div>
	<div class="son2"></div>
</div>
<div class="ershu"></div>

.father {
     overflow: hidden;
     width: 800px;
     background-color: pink;
}

5.补充（直接定义父元素高度解决问题）

父级div定义 height： 父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

<div class="father clearfix">
	<div class="son"></div>
	<div class="son2"></div>
</div>
<div class="ershu"></div>

.father {
	width: 1000px;
    height: 200px;
    background-color: pink;
}

优点： 简单、代码少、容易掌握

缺点： 只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题