清理浮動的方法

時間 2019-11-30

標籤清理浮動方法简体版

原文原文鏈接

浮動出現的緣由:css

一開始浮動被建立的緣由是爲了實現報紙文字環繞圖片的格式，以下圖，後來通過你們的學習研究後才發展出了後來的一系列功能。html

盒子浮動清理：app

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        .wrapper{
            border: 5px solid salmon;
        }
        .wrapper .red{
            width: 100px;
            height: 100px;
            background-color: lightblue;
            float: left;
            margin-right: 10px;
        }
    </style>
    <body>
        <div class="wrapper">
            <div class="red"></div>
            <div class="red"></div>
        </div>
    </body>
</html>

未清理浮動前

清理浮動的方法：ide

一、僞元素 ::after 學習

.wrapper::after{
    content: "";
    display: block;
    clear: both;
}

二、觸發BFCspa

1）overflow:hidden;3d

.wrapper{
    overflow: hidden;
}

2） float:left/right 或者 position:fixed/absolute （父級元素會被內部改成 inline-block ）code

注意：在使用BFC清理浮動時，須要配合實際須要，只有實際狀況容許的時候選擇BFC才能夠，好比：若是要求父級元素必須爲 block時，就不能夠用float 或者position ; htm

三、塊級元素style 添加 clear:both;(不推薦，這樣會改變html結構)blog

在wrapper 盒子內最下面加 <p style="clear: both;"></p>；

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。