CSS浮动

经典真题

• 清除浮动的方法有哪几种？

浮动

背景

浮动出现之初，是为了实现‘文字环绕’的效果，像word里的‘图文混排’，也像报纸上的文字环绕着图片。

<div class="container">
    <div class="text">
        <img class="img" src="../../大纲.jpg" width="100px" height="100px" alt="">
        <p>
            这是前段课程的大纲，请您仔细阅读。
            这是前段课程的大纲，请您仔细阅读。
            这是前段课程的大纲，请您仔细阅读。
            这是前段课程的大纲，请您仔细阅读。
            这是前段课程的大纲，请您仔细阅读。
            这是前段课程的大纲，请您仔细阅读。
            这是前段课程的大纲，请您仔细阅读。
            这是前段课程的大纲，请您仔细阅读。
            这是前段课程的大纲，请您仔细阅读。
            这是前段课程的大纲，请您仔细阅读。
            这是前段课程的大纲，请您仔细阅读。
            这是前段课程的大纲，请您仔细阅读。
            这是前段课程的大纲，请您仔细阅读。
            这是前段课程的大纲，请您仔细阅读。                
        </p>
    </div>
    <hr />
    <div class="box1">111</div>
    <div class="box2">222</div>
    <span class="sp1">111</span>
    <span class="sp2">222</span>
</div>

.box1,
.box2 {
    width: 100px;
    height: 100px;
}

.box1 {
    background-color: aquamarine;
}

.box2 {
    background-color: bisque;
    float: left;
}

.sp1,
.sp2 {
    width: 100px;
    height: 100px;
}

.sp1 {
    background-color: paleturquoise;
    float: left;
}

.sp2 {
    background-color: pink;
}

.img {
    float: left;
}

浮动的应用场景：两栏布局、三栏布局等。

浮动的特性

脱离标准流

理解：浮起来了，后面的兄弟元素就当它不存在，都往前移动。如果前面的元素是块级就换一行，如果是行级就并排。

浮动元素互相贴着

理解：会在水平方向上紧紧贴着，直到宽度不够了才会重启一行。

块级元素的宽度收缩

理解：原本块级元素不设宽高，那么宽度就是视窗的宽，浮动之后，宽度由内容撑起来。

让行级元素变块级

理解：让span跟块级元素一样，可以设置宽高。

清除浮动

浮动带来的副作用，如元素会紧贴着

<ul>
    <li>导航1</li>
    <li>导航2</li>
    <li>导航3</li>
</ul>
<div class="clear"></div>
<ul>
    <li>衬衫</li>
    <li>裤子</li>
    <li>鞋子</li>
</ul>

法一：给父元素设置高度(高度必须比子元素高，否则不生效)。 如果一个元素要浮动，那么祖先元素一定要有高度，有高度才能关住浮动

 ul {   
    height: 50px; 
    background-color: aqua;
}
li {
    background-color: pink;
    float: left;
}

法二：使用clear:both(margin失效了，给ul加了border才生效，但是两个ul之间的还是连在一起)

ul:{
    background-color: aqua;
    border: 1px solid red
}
ul:nth-child(2) {
    clear: both; 
    margin-top: 100px;
}
li {
    background-color: pink;
    float: left;
}

法三：隔墙法，还是用clear属性，不要要借助一个div，margin也正常了

ul:nth-child(2) {
    margin-top: 100px;
}
li {
    background-color: pink;
    float: left;
}
.clear{
    clear: both;
}

法四：内墙法，没有高的父元素，子元素浮动，高度就会塌陷，用内墙法撑起父元素高度。(可以借用伪元素)

<div class="container">
    <p></p>
    <div class='clear'></div>
</div>

.container {
    background-color:red;
}
p {
    width: 100px;
    height: 100px;
    background-color: green ;
    float:left
}
.clear{
    clear: both;
}

法五：overflow属性 给父元素加overflow:hidden属性，可以生成一块独立的BFC，不会互相影响了。

<ul>
    <li>导航1</li>
    <li>导航2</li>
    <li>导航3</li>
</ul>
<ul>
    <li>衬衫</li>
    <li>裤子</li>
    <li>鞋子</li>
</ul>

样式：

ul:{
    background-color: aqua;
    overflow: hidden;
}
li {
    background-color: pink;
    float: left;
}

法六：伪元素

<ul class='one'>
    <li>导航1</li>
    <li>导航2</li>
    <li>导航3</li>
</ul>
<ul class='two'>
    <li>衬衫</li>
    <li>裤子</li>
    <li>鞋子</li>
</ul>

样式：

.two{
    margin-top: 10px
}
.one::afet{
    content:''
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
li{
    float: left;
    width: 100px;
    height: 20px;
    background-color: pink   
}