元素浮動

時間 2019-11-20

標籤元素浮動简体版

原文原文鏈接

子元素浮動會致使父元素盒子沒法被撐開，致使父元素的樣式沒法顯示，如下介紹幾種清除浮動的方法css

原代碼：html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #content{
            border: 1px red solid;
        }
        .fl{
            border: 1px blueviolet solid;
            height: 100px;
            width: 100px;
            float: left;
        }
        .fr{
            border: 1px green solid;
            height: 200px;
            width: 200px;
            float: right;
        }
    </style>
</head>
<body>
<div id="content">
    <div class="fl">內容一</div>
    <div class="fr">內容二</div>
</div>
</body>
</html>

顯示以下：spa

一、設置父元素高度：code

height: 500px; /*設置父元素高度*/

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #content{
            border: 1px red solid;
            height: 500px; /*設置父元素高度*/
        }
        .fl{
            border: 1px blueviolet solid;
            height: 100px;
            width: 100px;
            float: left;
        }
        .fr{
            border: 1px green solid;
            height: 200px;
            width: 200px;
            float: right;
        }
    </style>
</head>
<body>
<div id="content">
    <div class="fl">內容一</div>
    <div class="fr">內容二</div>
</div>
</body>
</html>

二、父元素絕對定位：position:absolute;htm

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #content{
            border: 1px red solid;
            position: absolute; /*父元素絕對定位*/
        }
        .fl{
            border: 1px blueviolet solid;
            height: 100px;
            width: 100px;
            float: left;
        }
        .fr{
            border: 1px green solid;
            height: 200px;
            width: 200px;
            float: right;
        }
    </style>
</head>
<body>
<div id="content">
    <div class="fl">內容一</div>
    <div class="fr">內容二</div>
</div>
</body>
</html>

三、父元素設置overflow：hiddenblog

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #content{
            border: 1px red solid;
            overflow: hidden; 
        }
        .fl{
            border: 1px blueviolet solid;
            height: 100px;
            width: 100px;
            float: left;
        }
        .fr{
            border: 1px green solid;
            height: 200px;
            width: 200px;
            float: right;
        }
    </style>
</head>
<body>
<div id="content">
    <div class="fl">內容一</div>
    <div class="fr">內容二</div>
</div>
</body>
</html>

四、父元素設置浮動：float：left/rightit

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #content{
            border: 1px red solid;
            float: left; 
        }
        .fl{
            border: 1px blueviolet solid;
            height: 100px;
            width: 100px;
            float: left;
        }
        .fr{
            border: 1px green solid;
            height: 200px;
            width: 200px;
            float: right;
        }
    </style>
</head>
<body>
<div id="content">
    <div class="fl">內容一</div>
    <div class="fr">內容二</div>
</div>
</body>
</html>

五、在子元素最後添加一個空盒子，並設置樣式爲clear:both;io

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #content{
            border: 1px red solid;
        }
        .fl{
            border: 1px blueviolet solid;
            height: 100px;
            width: 100px;
            float: left;
        }
        .fr{
            border: 1px green solid;
            height: 200px;
            width: 200px;
            float: right;
        }
       .clear{
            clear: both;
        } 
    </style>
</head>
<body>
<div id="content">
    <div class="fl">內容一</div>
    <div class="fr">內容二</div>
    <div class="clear"></div>
</div>
</body>
</html>

六、在父元素樣式上添加一個僞類，至關於在子元素最後添加一個空盒子，原理與5相似class

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #content{
            border: 1px red solid;
        }
        .fl{
            border: 1px blueviolet solid;
            height: 100px;
            width: 100px;
            float: left;
        }
        .fr{
            border: 1px green solid;
            height: 200px;
            width: 200px;
            float: right;
        }
        #content:after{
            content: '';
            display: block;
            /!*height: 0;*!/
            clear: both;
        }
    </style>
</head>
<body>
<div id="content">
    <div class="fl">內容一</div>
    <div class="fr">內容二</div>
</div>
</body>
</html>

相關標籤/搜索

每日一句

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