float属性（浮动） clear 以及after伪元素

Posted by xiongmao; tagged with float , 浮动 , clear , after伪元素

float
通过浮动可以使一个元素向其父元素的左侧或右侧移动
　使用float属性来设置于元素的浮动
　　可选值：
　　　none 默认值，不浮动
　　　left 元素向左浮动
　　　right 元素向右浮动
注意：
　元素设置浮动后，水平居中的等式便不需要强制成立
　元素浮动以后，会完全从文档刘中脱离，不在占用文档流的位置，所以元素下边的还在文档流的元素会自动向上移动

浮动的特点
　　1.浮动元素会脱离文档里，不会占据文档流的位置
　　2.设置浮动以后元素会向父元素的左侧或右侧移动
　　3.浮动元素默认不会从父元素中移动
　　4.浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
　　5.如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
　　6.浮动元素不会超过它上边的浮动的兄弟元素，最多和它一样高

clear
　作用：清除浮动元素对当前元素所产生的影响
可选值：
　　left 清除左侧浮动元素对当前元素所产生的影响
　　right 清除右侧浮动元素对当前元素所产生的影响
　　both 清除两侧中最大影响的那侧
原理：
设置清除浮动以后，浏览器会自动为元素添加一个外边框
以使其位置不受其他元素的影响

after伪元素来让子元素 在悬浮撑开父元素

　 脱离文档流的特点
块元素：
　　1.块元素不在独占页面的一行
　　2.脱离文档流以后，块元素的宽度和高度默认都被内容撑开

行内元素：
行内元素脱离文档流以后会变成块元素，特点和块元素一样
脱离文档流以后，不需要再区分块和行内了

网页布局：
2021.12.5.2.png
代码：

<!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>
        header,main,footer{
            margin: 0px auto;
        }
        header{
            width: 1000px;
            height: 150px;
            background-color:#b9b9b9;
        }
        main{
            width: 1000px;
            height: 400px;
            background-color: #bfa;
            margin: 10px auto;
        }
        nav,article,aside{
            float: left;
            height: 100%;
        }
        nav,aside{
            width: 190px;
        }
        nav{
            background-color: yellow;
        }
        article{
            width: 600px;
           margin: 0 10px;
            background-color: orange;
        }
        aside{
            background-color: pink;
        }
        footer{
            width: 1000px;
            height: 150px;
            background-color: #b9b9b9;
        }
    </style>
</head>
<body>
    <header></header>
    <main>
        <nav></nav>
        <article></article>
        <aside></aside>
    </main>
    <footer></footer>
</body>
</html>

clear 练习效果：

<!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>Document</title>
</head>
<style>
    .box1{
        width: 200px;
        height: 200px;
        background-color: pink;
        float: left;
    }
    .box2{
        width: 400px;
        height: 400px;
        background-color: yellow;
        float: right;
    }
    .box3{
        width: 200px;
        height: 200px;
        background-color: orange;
        clear: both;
    }
    /*
    由于box1的浮动，导致box3位置上移
        也就是box3受到box1的影响，位置发生了改变

    如果不想因为某个元素因为其他元素浮动而受到影响而改变位置
        可以通过clear属性来清除浮动元素对当前元素所产生的影响

    clear
        作用：清除浮动元素对当前元素所产生的影响
        可选值：
            left  清除左侧浮动元素对当前元素所产生的影响
            right  清除右侧浮动元素对当前元素所产生的影响
            both   清除两侧中最大影响的那侧

    原理：
        设置清除浮动以后，浏览器会自动为元素添加一个外边框
            以使其位置不受其他元素的影响

    */
</style>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
</html>

after伪元素使用

 <style>
        .box1{
            border: 10px red solid;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }
        /*利用after伪元素来让子元素在悬浮撑开父元素*/
        .box1::after{
            content: '';
            /*转换成块级*/
            display: block;
            /*清除*/
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>