浮动(float)

1个月前 (08-11) 219次浏览 已收录 1个评论

说到浮动,先来看下传统网页布局的三种方式

  • 普通流(标准流/文档流)
  • 浮动
  • 定位

标准流:标签按照规定默认方式排列,也是最基本的布局方式,比如这篇文章以前写的所有文章的案例都是标准流。

网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动
网页布局第二准则:先设置盒子大小,后设置盒子的位置

浮动定义

定义:float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法:

选择器{ float: 属性值;}

属性值:

  • none 默认值不浮动
  • left 元素向左浮动
  • right 元素向右浮动
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
        .left,
        .right {
            float: left;
            width: 200px;
            height: 300px;
            background-color: aquamarine;
        }

        .right {
            float: right;
        }
    </style>
</head>

<body>
    <div class="left">1</div>
    <div class="right">2</div>
</body>

</html>
结果演示

浮动特性(重难点)

加入浮动之后的元素会具有很多特性

  • 浮动元素会脱离标准流(脱标)
  • 浮动的元素会一行内显示并且元素顶部对齐
  • 浮动的元素会具有行内块的特性(除了中间没有空白缝隙)

脱离标准普通流的控制(浮)移动到指定位置(动),也就是脱标,浮动的盒子不再保留原先的位置

为了约束浮动元素位置,网页布局一般采取的策略是:

先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置,复合网页布局第一准则。

浮动元素居中显示策略:

先用一个标准流父元素居中显示,内部浮动子元素放入父元素内,实现居中显示。


浮动注意点

浮动盒子只会影响后边的标准流,前面的标准流不会被影响。


浮动布局练习

练习1

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动布局1</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .hezi {
            background-color: aquamarine;
            height: 200px;
            margin: 0 auto;
            width: 430px;

        }

        .hezi li {
            height: 200px;
            background-color: red;
            width: 100px;
            float: left;
            margin-right: 10px;
        }

        /* 这里要注意权重的问题 */
        .hezi .hz4 {
            margin-right: 0;
        }
    </style>
</head>

<body>
    <ul class="hezi">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="hz4">4</li>
    </ul>
</body>

</html>
结果演示

小米布局练习

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .box {
            background-color: green;
            width: 1226px;
            height: 617px;
            margin: 0 auto;

        }

        .left {
            background-color: red;
            width: 233px;
            height: 617px;
            float: left;
        }

        .pts {
            background-color: blue;
            width: 233px;
            height: 300px;
            float: left;
            margin-left: 15px;
            margin-bottom: 15px;
        }
    </style>
</head>

<body>
    <div class="box">

        <div class="left">左导航</div>
        <ul>
            <li class="pts">1</li>
            <li class="pts">2</li>
            <li class="pts">3</li>
            <li class="pts">4</li>
            <li class="pts">5</li>
            <li class="pts">6</li>
            <li class="pts">7</li>
            <li class="pts">8</li>
        </ul>
    </div>
</body>

</html>
结果演示

清除浮动

本质

  • 清除浮动的本质就是清除浮动元素造成的影响
  • 如果父盒子本身有高度,则不需要清除浮动
  • 清除浮动之后,父级就会根据浮动的子盒子自动检测高度,父级有了高度,就不会影响下面的标准流了。

语法

选择器{clear:属性值;}

属性值

  • both 同时清除左右两侧浮动的元素

清除浮动的方法

  • 额外标签法也称为隔墙法
  • 父级添加overflow伪元素
  • 父级添加after伪元素
  • 父级添加双伪元素

额外标签法也称为隔墙法

这种方法只能用块级元素作为隔墙

未清除浮动之前

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>为什么需要清除浮动</title>
    <style>
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

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

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">1</div>
        <div class="ermao">2</div>
    </div>
    <div class="footer"></div>

</body>

</html>
结果演示

清除浮动后

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>为什么需要清除浮动</title>
    <style>
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

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

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }

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

<body>
    <div class="box">
        <div class="damao">1</div>
        <div class="ermao">2</div>
        <div class="ermao">2</div>
        <div class="ermao">2</div>
        <div class="ermao">2</div>
        <div class="ermao">2</div>
        <div class="clear"></div>
    </div>
    <div class="footer"></div>

</body>

</html>
结果演示

父级添加overflow伪元素

属性值

  • hidden
  • auto
  • scroll

语法:

overflow:hidden

缺点:无法显示溢出的部分

伪元素清除浮动

.clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }

双伪元素清除浮动

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

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

补充一个巧妙布局

需求:需要四个紧挨的边框,并且每个边框粗细一样,鼠标经过会变色

错误布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin负值巧妙运用</title>
    <style>
        li{
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }
li:hover{
            /* 如果li都有定位,则利用z-index提高层级,这样的话,鼠标经过,就会优先选出这个li进行操作*/
            z-index: 1;
            border-color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
</html>

代码解释:

首先解决粗细用到了matgin-left:-1px,这个属性的运行的流程:

  1. 对第一个li进行样式设置,并且向左移动一像素
  2. 在对第二个li进行样式设置,并且向左移动一像素,此时并没有1+1=2像素,还是1像素,从而达到了边框粗细相同的结果
结果演示

正确布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin负值巧妙运用</title>
    <style>
        li{
            position: relative;
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }
        li:hover{
            z-index: 1;
            border-color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
</html>

代码解释:

  • 相对定位会压住标准流以及浮动的盒子,来解决右边框不变色的情况
  • 如果li都有定位,则利用z-index提高层级,这样的话,鼠标经过,就会优先选出这个li进行操作
结果演示

css初始化

/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}
/* 去掉li 的小圆点 */
li {
    list-style: none
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过button 按钮的时候,鼠标变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    /* "B8BF53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "B8BF53", sans-serif
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "B8BF53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}
/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

 


渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:浮动(float)
喜欢 (0)

您必须 登录 才能发表评论!

(1)个小伙伴在吐槽
  1. 补一个简写清除浮动: .clearfix::after{ content:''; display: block; clear: both; }
    厚积薄发2021-09-03 22:32