CSS（浮动）

最新推荐文章于 2021-11-24 15:10:13 发布

simon_dg

最新推荐文章于 2021-11-24 15:10:13 发布

阅读量582

点赞数 1

分类专栏：前端基础文章标签： css

本文链接：https://blog.csdn.net/simon_dg/article/details/77851584

版权

前端基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、标准文档流

web页面的制作，是个“流”，在标准流下，块级严格遵守从上而下的顺序，行级元素在一行中水平布置。
1.块级元素和行内元素
标签分为两种等级：（都是在标准流下）
1）块级元素
● 霸占一行，不能与其他任何元素并列。
● 能够设置宽、高。
● 如果不设置宽度，那么宽度将默认变为父亲的100%。
● 如果不设置高度，会被孩子撑大。但是孩子浮动了，就不会撑开父亲的高度。如果父亲设置了宽高，孩子宽高（内容）大于父亲，会溢出父亲。
2）行内元素
● 与其他行内元素并排
● 不能设置宽、高。默认的宽度，就是文字的宽度。
1.1块级元素和行内元素的相互转换
块级元素可以设置为行内元素

    div{
        display: inline;
        background-color: pink;
        width: 500px;
        height: 500px;
    }
/*display设置“显示模式”，用来改变元素的行内、块级性质
inline表示“行内”。
一旦，给一个标签设置  display: inline;
那么，这个标签将立即变为行内元素。拥有行内元素的特性*/

行内元素可以设置为块级元素

    span{
    display: block;
    width: 200px;
    height: 200px;
    background-color: pink;
}
/*“block”是“块”的意思，让标签变为块级元素。同样也拥有块级元素的特征。*/

之前说过，网页是“流”，标准很苛刻。现在既想让两个元素并排又想设置宽高，就要让两个元素脱离标准流。
css中一共有三种手段，使一个元素脱离标准文档流：
1）浮动
2）绝对定位
3）固定定位

二、浮动

标准流下：

脱离文档流：

文档流

2.1浮动特点
浮动的性质：脱标、贴边、字围、收缩。
脱离文档流：
当一个标签脱离文档流后，不管以前是块级还是行内都不区分了。既能并排又能设置宽高。

浮动的元素互相贴靠：
如果有足够空间，三弟就会靠着2哥。如果没有足够的空间，那么会靠着1号大哥。
如果没有足够的空间靠着1号大哥，自己去贴左墙。

浮动的元素有“字围”效果：
浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象

收缩：
一个浮动的元素，如果没有设置width，那么将自动收缩为文字（孩子）的宽度。

三、清除浮动

清除浮动的目的：为了解决父级元素没有高度。
下面一个例子，div没有设置高度，li是浮动的。

 <style type="text/css">
    li {
        float: left;
        width: 90px;
        height: 40px;
        background-color: yellow;
        text-align: center;
    }
    </style>
</head>

<body>
    <div>
        <ul>
            <li>Bigbang</li>
            <li>iKON</li>
            <li>highlight</li>
            <li>FTIsland</li>
            <li>水晶男孩</li>
        </ul>
    </div>
    <div>
        <ul>
            <li>李洪基</li>
            <li>龙少女</li>
            <li>太阳</li>
        </ul>
    </div>
</body>

按标准流说，两个div没有浮动，会从上到下排列，像下面：

而li元素会在各自的父元素里面浮动，想象图：

但是实际效果图是这样的：

原因是因为父亲没有高度，关不住孩子。所以孩子就会浮上去并排。

清除浮动——父亲加高度
清除浮动——clear：both；
clear：both指的是左浮动、右浮动都要清除。但是这个方法有一个弊端：margin失效

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    li {
        float: left;
        width: 90px;
        height: 40px;
        background-color: yellow;
        text-align: center;
    }

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

<body>
    <div>
        <ul>
            <li>Bigbang</li>
            <li>iKON</li>
            <li>highlight</li>
            <li>FTIsland</li>
            <li>水晶男孩</li>
        </ul>
    </div>
    <div class="div2">
        <ul>
            <li>李洪基</li>
            <li>龙少女</li>
            <li>太阳</li>
        </ul>
    </div>
</body>

</html>

3.清除浮动——overflow:hidden;
表示“溢出隐藏”。所有溢出边框的内容，都要隐藏掉。
父亲设置了宽高，孩子宽高（内容）大于父亲，会溢出父亲。

  <style>
    .div1 {
        height: 100px;
        width: 100px;
        overflow: hidden;
        border: 1px solid red;
    }
    </style>

下面加了overflow：hidden；

解决上面那个例子：

div {
        overflow: hidden;
    }

    li {

        float: left;
        width: 90px;
        height: 40px;
        background-color: yellow;
        text-align: center;
    }
    </style>
</head>

<body>
    <div>
        <ul>
            <li>Bigbang</li>
            <li>iKON</li>
            <li>highlight</li>
            <li>FTIsland</li>
            <li>水晶男孩</li>
        </ul>
    </div>
    <div class="div3"></div>
    <div class="div2">
        <ul>
            <li>李洪基</li>
            <li>龙少女</li>
            <li>太阳</li>
        </ul>
    </div>
</body>

overflow

但是现在清除浮动常用的是：清除闭合浮动。
只在需要清除浮动的div上面加上类名clearfix。下面的代码是京东清除浮动代码，也是现在流行的代码：

 .clearfix:after{ 
/* "：after"为伪类，但是":after"在旧版本里是伪类，在新版本里是伪元素，新版本下:after会被自动识别为::after按伪元素来对待。 */
content:" . ";        /* .clearfix的元素后面插入一个元素，内容为".",也可以什么也不写 */
display:block; /* 将元素设置为块级元素 */
visibility:hidden; /* 可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;只是隐藏但还占位置 */
clear:both; /* 清除左右浮动 */
height:0  /* 高度为0 */
}
.clearfix{*zoom:1} /*这是针对于IE6的，因为IE6不支持:after伪类，所以需要触发hasLayout机制。_zoom:1;能够触发浏览器hasLayout机制。这个机制，就IE6有。*/