由float引發的思考

lemon 發布于2019-08-30 14:07 / 3160人閱讀

摘要：需要注意的是網上說的清楚浮動原理和這個一樣當然清楚浮動還有另外一種方式原理是觸發浮動元素的父元素形成塊級格式化上下文亦即

最近工作中不時會遇到float使用問題,由于CSS是一系列屬性疊加的結果,float經常會和BFC,外邊距折疊等一起出現,故而原本簡單的問題卻讓人老是覺得迷糊,本文記錄一下float的使用以備日后查閱.
首先我們來看一下最基本的代碼:





    
    
    
    Document

上述代碼是一個div內有兩個子div,由于div是塊級元素,所以children1和children2會上下排列:

首先我們給children2加上一個左浮動樣式,即把CSS樣式更改如下:

 #parent {
            padding: 10px;
            border: 3px solid black;
            background-color: green;
        }
        
        #children1 {
            width: 80px;
            height: 80px;
            background-color: red;
            margin-top: 10px;
        }
        
        #children2 {
            width: 80px;
            height: 80px;
            background-color: blue;
            float: left;
        }

顯示結果如下:

上圖中,由于children2(藍色方塊)增加了浮動樣式,浮動樣式不是正常的頁面流,是獨立定位的.所以parent塊只包含了children1(紅色方塊),children2就超出了父元素.

上面我們是給children2加上了左浮動,假若我們是給children1加上了左浮動呢?

 #parent {
            padding: 10px;
            border: 3px solid black;
            background-color: green;
        }
        
        #children1 {
            width: 80px;
            height: 80px;
            background-color: red;
            margin-top: 10px;
            float: left;
        }
        
        #children2 {
            width: 80px;
            height: 80px;
            background-color: blue;
        }

顯示結果如下:

上圖中因為children1(紅色方塊)設置了浮動樣式,且浮動元素z-index級別高于普通元素,所以它會在children2(藍色方塊)上面顯示.

通常浮動元素會引起父元素高度塌陷,例如當我們把CSS文件改成下面這樣的時候:

 #parent {
            padding: 10px;
            border: 3px solid black;
            background-color: green;
        }
        
        #children1 {
            width: 80px;
            height: 80px;
            background-color: red;
            margin-top: 10px;
            float: left;
        }
        
        #children2 {
            width: 80px;
            height: 80px;
            background-color: blue;
            float: right;
        }

顯示結果如下:

為了清楚浮動,我們可以在parent塊中增加一個子塊,并添加如下樣式:

 #children3 {
            width: 80px;
            height: 80px;
            background-color: orange;
            clear: both;
        }

此時顯示結果如下:

這樣一來就可以清楚浮動了,原理是父容器現在必須考慮非浮動子元素的位置，而后者肯定出現在浮動元素下方，所以顯示出來，父容器就把所有子元素都包括進去了。需要注意的是,網上說的clearfix清楚浮動原理和這個一樣.
當然清楚浮動還有另外一種方式,原理是觸發浮動元素的父元素形成塊級格式化上下文,亦即BFC.

云服務器 GPU云服務器人工智能的思考對人工智能的思考人工智能由誰提出的由匯編語言寫的程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115785.html

由重構react組件引發的函數式編程的思考

摘要：對于高階組件的使用場景如果有相關經驗的或者有不同的見解的希望能夠在我的博客下面留言最近在重構組件時，學習了一些高階組件的編寫思路，其實是由高階函數沿伸而來。對于高階組件的使用場景如果有相關經驗的或者有不同的見解的希望能夠在我的博客下面留言最近在重構react組件時，學習了一些高階組件的編寫思路，其實是由高階函數沿伸而來。一般情況我們編寫一個react組件大致樣子如下： class ...

leone 2019-08-20 18:23 評論0 收藏0
由一個問題引發關于對象和對象子類型的思考

摘要：答案核心對象和對象子類型先看一段解釋第一個代表對象。第二個代表對象子類型。那么問題來了，什么是不嚴謹的說，中的所有，都是由對象衍生出來的對象子類型包括，和。問題：如題 var obj=new Object(); Object.prototype.toString.call(obj);// [object Object] var arr=new Array(); Object.pro...

hatlonely 2019-08-21 17:05 評論0 收藏0
由文件導出亂碼引發對字符編碼的思考

摘要：參考的資料前輩們已經對字符編碼講的很好了，通俗易懂。字符編碼的誕生是人類對科學技術妥協的結果。字符編碼為什么有很多方式。這是從計算機層面總體上對字符編碼的認識。中的一些字符集字符編碼知識以前在工作中遇到導出中文亂碼時，就google一下，看見把utf-8編碼換成GBK之類的編碼，導出在Excel中打開就不會亂碼了。只是解決了當前問題。對字符編碼沒有很好的認識。這次又遇到了，遂記錄之。...

longmon 2019-07-01 14:00 評論0 收藏0