欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS（浮动）

程序员文章站 2024-01-29 13:11:10
...

一、标准文档流

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） 固定定位

二、浮动

标准流下：
CSS（浮动）



脱离文档流：

CSS（浮动）



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



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

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

收缩：
一个浮动的元素，如果没有设置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没有浮动，会从上到下排列，像下面：
CSS（浮动）

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

但是实际效果图是这样的：
CSS（浮动）

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

  1. 清除浮动——父亲加高度
  2. 清除浮动——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;
表示“溢出隐藏”。所有溢出边框的内容，都要隐藏掉。
父亲设置了宽高，孩子宽高（内容）大于父亲，会溢出父亲。
CSS（浮动）

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

下面加了overflow：hidden；
CSS（浮动）

解决上面那个例子：

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>

CSS（浮动）

但是现在清除浮动常用的是：清除闭合浮动。
只在需要清除浮动的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有。*/

*zoom:1使用的是hack，专针对某一种浏览器做兼容。

上一篇： pytorch+lstm实现电影情感分类

下一篇： python_Django05

推荐阅读