清除浮動的幾種方法

時間 2019-11-13

標籤清除浮動幾種方法简体版

原文原文鏈接

老生常談，清除浮動

首先介紹一下浮動元素的特色
1.在一行顯示；
2.浮動元素會脫離文檔流，致使下面沒有浮動的元素之別不了它的高度和位置，就會往上跑佔領浮動元素的位置；
3.元素都是左浮動float:left 元素從左往右依次排列；若是元素都是右浮動，元素從右往左依次排列；
4.父元素浮動，子元素並不會繼承子元素的浮動，若是想要子元素也在一行顯示，咱們須要給子元素也加浮動的屬性；
5.浮動屬性不能繼承；
6.浮動元素自己具備塊的特色，因此用了浮動就不須要再加display:block；
7.全部的元素均可以用浮動屬性；css
浮動產生的影響
1.設置背景顏色屬性背景沒有起做用；
2.給父元素設置邊框border屬性沒有被撐開；
3.給父元素設置內邊距padding屬性也沒有被撐開；html

如何解決浮動產生的影響，清浮動

1.給浮動元素的父元素手動添加一個高度height屬性（不推薦）
2.給浮動元素的父元素設置：overflow: hidden/auto
3.在浮動元素的父元素結束變遷以前加一個具備塊級元素特色的標籤（咱們通常用div），
給元素加一個clear:both <div style="clear:both"><div>
4.clearfix僞元素去清除浮動spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .wrap{
            background-color: mediumvioletred;
            border: 10px solid red;
            padding: 10px;
            /*height: 200px;*/
           /* overflow: hidden;*/
        }
        .left{
            float: left;
            width: 200px;
            height: 200px;
            background-color: darkblue;
        }
        .right{
            float: left;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .clearfix:after{
            display: block;/*確保元素是一個塊級元素*/
            clear: both;/*不容許左右兩邊有浮動對象*/
            content: '';
            *zoom:1;/*兼容ie7*/
            /*寫全的樣式屬性：下面的四個屬性不是必備的條件*/
            height: 0;
            font-size: 0;
            overflow: hidden;
            visibility: hidden;
        }
    </style>
</head>
<body>
<div class="wrap clearfix">

    <div class="left"></div>
    <div class="right"></div>
    <!--<div style="clear:both"></div>-->
</div>
</body>
</html>

相關標籤/搜索

每日一句

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