国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

理解clear：both屬性

MockingBird / 1562人閱讀

摘要：在前端開發布局中，經常會被這個屬性搞暈，尤其是新手的浮動，會使元素向左或向右移動，其周圍的元素也會重新排列。元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。浮動元素之前的元素將不會受到影響。導致圖片將會浮動在段落的右邊。

在前端開發布局中，經常會被float這個屬性搞暈，尤其是新手

CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。
Float（浮動），往往是用于圖像，但它在布局時一樣非常有用。

元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。
一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
浮動元素之后的元素將圍繞它。
浮動元素之前的元素將不會受到影響。
如果圖像是右浮動，下面的文本流將環繞在它左邊：

img 
{
    float:right;
}





在下面的段落中，我們添加了一個 float:right 的圖片。導致圖片將會浮動在段落的右邊。




這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。

這是float的常見用法：對于文字包圍圖片
但是在div布局中 這里舉一個例子：


    


    
頭部信息

    
   
        
        
右側內容

結果：

灰色的背景色并沒有添加到第二行，因為第二行都是float的，和.ob-body不在一個層面上，第二行浮在.ob-body上層
現在我們把.clearfix的注釋拿掉

 


    
頭部信息

    
   
        
        
右側內容

結果：

最后解析一下：為什么加了clearfix就ok了。
兩種寫法其實一個意思，就是在.ob-body的最后加入一個空的

(只要是塊的就行，因為只有塊，才可以橫向撐滿)，
這個
其實就是一個看不見的細長條，因為他在.ob-body的最下邊，并且并不是float的，一定會受到.ob-body的背景色的控制，他的存在定義了.ob-body的高度，所以高度范圍內都會被灰色的背景色影響到。并且這個最下邊的
必須要有clear:both,不然如果只是標準流，會緊貼在第一行的底部，當然不能涵蓋第二行了，其實這個例子里使用clear:left也有效（因為第二行都是float:left），但為了通用性，就使用both吧.并且也驗證了:這個規則只能影響使用清除的元素本身，不能影響其他元素,clear了隱藏div的both。

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

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

相關文章

  • 理解CSS浮動與清除浮動

    摘要：那我們舉個栗子當先聲明一個元素向左浮動時，由于脫離文檔流，這個元素的右邊就會空出一片空間，空間的長寬與浮動元素長寬相同。總結總結下來，浮動與清除浮動的順序關系如下設置元素浮動，元素脫離文檔流，不計算高度。 本文主要探討兩個問題： 為什么CSS設置浮動會引起父元素塌陷 為什么設置clear:both能清除浮動，并撐開父元素。 起因 CSS的浮動，算是我在寫網頁時用的最多的屬性之一。但...

    劉東 評論0 收藏0

  • 【前端Talkking】CSS系列——CSS深入理解之float浮動

    摘要：包裹性所謂包裹性，其實是由包裹和自適應兩部分組成。官方對屬性的解釋是元素盒子的邊不能和前面的浮動元素相鄰。清除高度塌陷的問題在上面的章節中，如果子元素設置浮動屬性，則父元素就會出現高度塌陷的問題。 float屬性是CSS中常用的一個屬性，在實際工作中使用的非常多，如果使用不當就會出現意料之外的效果。雖然很多人說浮動會用就行、浮動過時了，但是對于優秀的前端開發人員，需要有刨根問底的精神，...

    yankeys 評論0 收藏0

  • CSS魔法堂：說說Float那個被埋沒的志向

    摘要：時其寬度始終保持占滿寬度的態度。清除浮動就是為浮動影響的范圍劃邊界。那么可歸結為的父容器包裹所有子元素。注意屬性值不能為空白，否則無法清除浮動。 前言 ?定位系統中第一難理解就是Normal flow，而第二就非Float莫屬了，而Float難理解的原因有倆，1. 一開頭我們就用錯了；2. 它跟Normal flow靠得太近了。本文嘗試理清Float的特性和行為特征，若有紕漏望各位指正...

    legendmohe 評論0 收藏0

  • 理解CSS浮動與清理

    摘要：浮動為什么會有文本環繞效果產生這個疑問主要來自于以往的印象浮動的元素是脫離文檔流的。也就是說，浮動元素的確脫離了文檔流，因此文檔流中的塊框會無視浮動的元素，但是文本不會。 作為前端寫了很多頁面布局，但是浮動這塊一直是我似懂非懂的盲點，一方面用浮動能實現很多布局，另一方面浮動造成的影響又會破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點。 本文主要討論以下幾個問題：1.浮動的原始用途...

    Tonny 評論0 收藏0

  • 理解CSS浮動與清理

    摘要：浮動為什么會有文本環繞效果產生這個疑問主要來自于以往的印象浮動的元素是脫離文檔流的。也就是說，浮動元素的確脫離了文檔流，因此文檔流中的塊框會無視浮動的元素，但是文本不會。 作為前端寫了很多頁面布局，但是浮動這塊一直是我似懂非懂的盲點，一方面用浮動能實現很多布局，另一方面浮動造成的影響又會破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點。 本文主要討論以下幾個問題：1.浮動的原始用途...

    cyqian 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<