資訊專欄INFORMATION COLUMN
摘要：清除浮動(dòng)的可用方式測試瀏覽器正常格式的代碼顯示如下圖片描述但是對(duì)和應(yīng)用后浮動(dòng)的影響顯而易見使元素從正常的文檔流中刪除，但是依舊會(huì)占據(jù)空間。
清除浮動(dòng)的可用方式 （測試瀏覽器：FF）
div0div1div2this is a paragraph
顯示如下：
圖片描述
但是對(duì)class1和class2應(yīng)用float:left后：
浮動(dòng)的影響顯而易見float:left/right/none; 使元素從正常的文檔流中刪除，但是依舊會(huì)占據(jù)空間。如果設(shè)置float的元素沒有設(shè)置寬度并且無內(nèi)容時(shí)，會(huì)縮成一個(gè)圓點(diǎn)。不設(shè)置寬度時(shí)寬度會(huì)隨內(nèi)容的增加而增加。浮動(dòng)會(huì)使當(dāng)前標(biāo)簽產(chǎn)生向上浮的效果，同時(shí)會(huì)影響到前后標(biāo)簽、父級(jí)標(biāo)簽的位置及 width height 屬性。而且同樣的代碼，在各種瀏覽器中顯示效果也有可能不相同。
清除浮動(dòng)
對(duì)受到影響的元素（一般是緊隨其后的同級(jí)元素）添加樣式clear: both，缺點(diǎn)：一般是加上空標(biāo)簽
div.class3{
clear:both;
}
父級(jí)元素設(shè)置寬度和overflow:hidden，不能設(shè)置height，瀏覽器會(huì)自己捕獲高度。
缺點(diǎn)：不能和position配合使用，因?yàn)槌龅某叽绲臅?huì)被隱藏。
父級(jí)div定義寬度和overflow:auto，不能設(shè)置height，瀏覽器會(huì)自己捕獲高度。
父級(jí)div定義height，直接解決了父級(jí)div無法自動(dòng)獲取到高度的問題
缺點(diǎn)：只適合高度固定的布局，要給出精確的高度，如果高度和父級(jí)div不一樣時(shí)，會(huì)產(chǎn)生問題，因此不推薦使用，只建議高度固定的布局時(shí)使用
父級(jí)div定義偽類:after和zoom
.clearfloat:after{
display:block;
clear:both;
content:"";
visibility:hidden;
height:0}
.clearfloat{zoom:1}
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法1有點(diǎn)類似（在末尾設(shè)置不顯示的塊級(jí)元 素，并加上clear:both），zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動(dòng)問題。
優(yōu)點(diǎn)：瀏覽器支持好，不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等）。定義公共類后可以減少CSS代碼。
清除浮動(dòng)的方法中，第五種父級(jí)div定義偽類具有較好的瀏覽器兼容性，在大型網(wǎng)站中多有應(yīng)用，但是代碼復(fù)雜，要加深理解。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111560.html
摘要：概念塊格式化上下文，是頁面塊級(jí)元素布局及浮動(dòng)元素彼此交互的區(qū)域。阻止相鄰元素外邊距合并的方法被非空內(nèi)容或分隔開。不在一個(gè)普通流中或用分割開。讓在垂直方向上不毗鄰。 BFC概念 BFC（block formatting context）塊格式化上下文， 是Web頁面塊級(jí)元素布局及浮動(dòng)元素彼此交互的區(qū)域。BFC是一個(gè)獨(dú)立的布局環(huán)境，（實(shí)際頁面渲染時(shí)是不可見的），由BFC構(gòu)建的區(qū)域其內(nèi)部元素...
摘要：寒假來了打算重新學(xué)習(xí)總結(jié)前端的知識(shí)要點(diǎn)以及前端領(lǐng)域出現(xiàn)的新東西，因此有了這個(gè)系列。在正常布局下中位于該浮動(dòng)元素之下的內(nèi)容此時(shí)會(huì)圍繞著浮動(dòng)元素。在父元素上設(shè)置屬性，如果此屬性設(shè)置為或者則可以達(dá)到清除浮動(dòng)的效果。但要注意并不是專門用于清除浮動(dòng)。 寒假來了, 打算重新學(xué)習(xí)總結(jié)前端的知識(shí)要點(diǎn)以及前端領(lǐng)域出現(xiàn)的新東西，因此有了這個(gè)系列。更多內(nèi)容可以去我的github: https://githu...
摘要：寒假來了打算重新學(xué)習(xí)總結(jié)前端的知識(shí)要點(diǎn)以及前端領(lǐng)域出現(xiàn)的新東西，因此有了這個(gè)系列。在正常布局下中位于該浮動(dòng)元素之下的內(nèi)容此時(shí)會(huì)圍繞著浮動(dòng)元素。在父元素上設(shè)置屬性，如果此屬性設(shè)置為或者則可以達(dá)到清除浮動(dòng)的效果。但要注意并不是專門用于清除浮動(dòng)。 寒假來了, 打算重新學(xué)習(xí)總結(jié)前端的知識(shí)要點(diǎn)以及前端領(lǐng)域出現(xiàn)的新東西，因此有了這個(gè)系列。更多內(nèi)容可以去我的github: https://githu...
摘要：浮動(dòng)定位的其中一種方法就是使用屬性。例如，是一個(gè)內(nèi)聯(lián)元素，它默認(rèn)的值為和值是不生效的。然而，如果我們將這個(gè)內(nèi)聯(lián)元素設(shè)置為浮動(dòng)，那么它的默認(rèn)值會(huì)變成這時(shí)候和值就生效了。包裹元素就是將浮動(dòng)元素置于父元素中，父元素作為容器會(huì)置于正常的文件流中。 CSS最大的用處之一就是可以將內(nèi)容和元素定位到任何我們想要的位置，使我們的設(shè)計(jì)具有結(jié)構(gòu)，使內(nèi)容更加易懂。 CSS有好幾種不同的定位屬性，每種都有自己...
閱讀 3569·2023-04-25 19:56
閱讀 1676·2021-11-12 10:36
閱讀 1797·2021-11-08 13:19
閱讀 1551·2019-08-30 14:06
閱讀 3044·2019-08-30 11:01
閱讀 1749·2019-08-29 13:23
閱讀 2750·2019-08-29 11:18
閱讀 3434·2019-08-26 13:35
