成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

理解clear：both屬性

MockingBird / 1624人閱讀

摘要：在前端開(kāi)發(fā)布局中，經(jīng)常會(huì)被這個(gè)屬性搞暈，尤其是新手的浮動(dòng)，會(huì)使元素向左或向右移動(dòng)，其周?chē)脑匾矔?huì)重新排列。元素的水平方向浮動(dòng)，意味著元素只能左右移動(dòng)而不能上下移動(dòng)。浮動(dòng)元素之前的元素將不會(huì)受到影響。導(dǎo)致圖片將會(huì)浮動(dòng)在段落的右邊。

在前端開(kāi)發(fā)布局中，經(jīng)常會(huì)被float這個(gè)屬性搞暈，尤其是新手

CSS 的 Float（浮動(dòng)），會(huì)使元素向左或向右移動(dòng)，其周?chē)脑匾矔?huì)重新排列。
Float（浮動(dòng)），往往是用于圖像，但它在布局時(shí)一樣非常有用。

元素的水平方向浮動(dòng)，意味著元素只能左右移動(dòng)而不能上下移動(dòng)。
一個(gè)浮動(dòng)元素會(huì)盡量向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?br>浮動(dòng)元素之后的元素將圍繞它。
浮動(dòng)元素之前的元素將不會(huì)受到影響。
如果圖像是右浮動(dòng)，下面的文本流將環(huán)繞在它左邊：

img 
{
    float:right;
}





在下面的段落中，我們添加了一個(gè) float:right 的圖片。導(dǎo)致圖片將會(huì)浮動(dòng)在段落的右邊。




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

這是float的常見(jiàn)用法：對(duì)于文字包圍圖片
但是在div布局中 這里舉一個(gè)例子：


    


    
頭部信息

    
   
        
        
右側(cè)內(nèi)容

結(jié)果：

灰色的背景色并沒(méi)有添加到第二行，因?yàn)榈诙卸际莊loat的，和.ob-body不在一個(gè)層面上，第二行浮在.ob-body上層
現(xiàn)在我們把.clearfix的注釋拿掉

 


    
頭部信息

    
   
        
        
右側(cè)內(nèi)容

結(jié)果：

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

(只要是塊的就行，因?yàn)橹挥袎K，才可以橫向撐滿)，
這個(gè)
其實(shí)就是一個(gè)看不見(jiàn)的細(xì)長(zhǎng)條，因?yàn)樗?ob-body的最下邊，并且并不是float的，一定會(huì)受到.ob-body的背景色的控制，他的存在定義了.ob-body的高度，所以高度范圍內(nèi)都會(huì)被灰色的背景色影響到。并且這個(gè)最下邊的
必須要有clear:both,不然如果只是標(biāo)準(zhǔn)流，會(huì)緊貼在第一行的底部，當(dāng)然不能涵蓋第二行了，其實(shí)這個(gè)例子里使用clear:left也有效（因?yàn)榈诙卸际莊loat:left），但為了通用性，就使用both吧.并且也驗(yàn)證了:這個(gè)規(guī)則只能影響使用清除的元素本身，不能影響其他元素,clear了隱藏div的both。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/112257.html

相關(guān)文章

  • 理解CSS浮動(dòng)與清除浮動(dòng)

    摘要：那我們舉個(gè)栗子當(dāng)先聲明一個(gè)元素向左浮動(dòng)時(shí)，由于脫離文檔流，這個(gè)元素的右邊就會(huì)空出一片空間，空間的長(zhǎng)寬與浮動(dòng)元素長(zhǎng)寬相同。總結(jié)總結(jié)下來(lái)，浮動(dòng)與清除浮動(dòng)的順序關(guān)系如下設(shè)置元素浮動(dòng)，元素脫離文檔流，不計(jì)算高度。 本文主要探討兩個(gè)問(wèn)題： 為什么CSS設(shè)置浮動(dòng)會(huì)引起父元素塌陷 為什么設(shè)置clear:both能清除浮動(dòng)，并撐開(kāi)父元素。 起因 CSS的浮動(dòng)，算是我在寫(xiě)網(wǎng)頁(yè)時(shí)用的最多的屬性之一。但...

    劉東 評(píng)論0 收藏0

  • 【前端Talkking】CSS系列——CSS深入理解之float浮動(dòng)

    摘要：包裹性所謂包裹性，其實(shí)是由包裹和自適應(yīng)兩部分組成。官方對(duì)屬性的解釋是元素盒子的邊不能和前面的浮動(dòng)元素相鄰。清除高度塌陷的問(wèn)題在上面的章節(jié)中，如果子元素設(shè)置浮動(dòng)屬性，則父元素就會(huì)出現(xiàn)高度塌陷的問(wèn)題。 float屬性是CSS中常用的一個(gè)屬性，在實(shí)際工作中使用的非常多，如果使用不當(dāng)就會(huì)出現(xiàn)意料之外的效果。雖然很多人說(shuō)浮動(dòng)會(huì)用就行、浮動(dòng)過(guò)時(shí)了，但是對(duì)于優(yōu)秀的前端開(kāi)發(fā)人員，需要有刨根問(wèn)底的精神，...

    yankeys 評(píng)論0 收藏0

  • CSS魔法堂：說(shuō)說(shuō)Float那個(gè)被埋沒(méi)的志向

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

    legendmohe 評(píng)論0 收藏0

  • 理解CSS浮動(dòng)與清理

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

    Tonny 評(píng)論0 收藏0

  • 理解CSS浮動(dòng)與清理

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

    cyqian 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<