清除浮動(dòng)方式

番茄西紅柿發(fā)布于2019-04-23 11:46 / 2380人閱讀

摘要：兩個(gè)盒子的屬性不會(huì)出現(xiàn)問題，而且可以設(shè)置高度來撐起父元素的高度清除浮動(dòng)方式三推薦通過偽類選擇器給第一個(gè)盒子設(shè)置額外的塊級(jí)標(biāo)簽兼容清除浮動(dòng)方式四推薦給第一個(gè)盒子設(shè)置屬性，也是通過兼容

清除浮動(dòng)方式一

子元素浮動(dòng)，給父元素設(shè)置高度；

清除浮動(dòng)方式二

例子：有兩個(gè)div標(biāo)簽，設(shè)置里面的元素浮動(dòng)，他們會(huì)并排一行，實(shí)現(xiàn)兩個(gè)盒子各占一行，給第二個(gè)盒子設(shè)置clear:both屬性即可

問題：第二個(gè)盒子的margin屬性會(huì)失效　　

清除浮動(dòng)方式三(不推薦)

1.外墻法：在兩個(gè)浮動(dòng)盒子的中間設(shè)置一個(gè)div標(biāo)簽的clear屬性即可，但第一個(gè)盒子的margin-bottom 屬性會(huì)出現(xiàn)問題，一般直接設(shè)置在中間的塊級(jí)元素

2.內(nèi)墻法：在第一個(gè)盒子所有子元素的最后添加一個(gè)額外的塊級(jí)元素標(biāo)簽，設(shè)置clear屬性。兩個(gè)盒子的margin屬性不會(huì)出現(xiàn)問題，而且可以設(shè)置高度來撐起父元素的高度

清除浮動(dòng)方式三(推薦)

通過偽類選擇器給第一個(gè)盒子設(shè)置額外的塊級(jí)標(biāo)簽

1 .div1::after{
2   content:;
3   display:block;
4   visibility:hidden;
5   height:0;
6   clear:both
7 }
  .div1{
   *zoom:1;  /*兼容IE6*/
 }

清除浮動(dòng)方式四(推薦)

給第一個(gè)盒子設(shè)置overflow：hidden屬性，也是通過*zoom:1兼容IE

云服務(wù)器 GPU云服務(wù)器清除浮動(dòng) html浮動(dòng)向上浮動(dòng) 上下浮動(dòng) 左右浮動(dòng)

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

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

相關(guān)文章

清除浮動(dòng)的方法

摘要：前言本文主要介紹清除浮動(dòng)的種風(fēng)方法及利弊浮動(dòng)對(duì)頁面的影響如果一個(gè)父級(jí)塊元素中的子元素浮動(dòng)，那么所有浮動(dòng)的子元素都脫離了文檔流，如果父元素?zé)o法確定高度，則其下面的兄弟元素會(huì)自動(dòng)補(bǔ)位，造成視圖結(jié)構(gòu)混亂，所以這個(gè)時(shí)候要進(jìn)行清除浮動(dòng)。前言：本文主要介紹清除浮動(dòng)的4種風(fēng)方法及利弊浮動(dòng)對(duì)頁面的影響：如果一個(gè)父級(jí)塊元素中的子元素浮動(dòng)，那么所有浮動(dòng)的子元素都脫離了文檔流，如果父元素?zé)o法確定高度...

Alex 2019-08-29 12:54 評(píng)論0 收藏0
那些年使用過的清除浮動(dòng)的方法

摘要：浮動(dòng)使元素框向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。由于浮?dòng)框脫離了文檔的普通流，所以文檔的普通流中的框表現(xiàn)得就像浮動(dòng)框不存在一樣。浮動(dòng)使元素框向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?由于浮動(dòng)框脫離了文檔的普通流，所以文檔的普通流中的框表現(xiàn)得就像浮動(dòng)框不存在一樣。這段代碼： .parent { width: ...

AbnerMing 2019-04-23 11:40 評(píng)論0 收藏0
那些年使用過的清除浮動(dòng)的方法

摘要：浮動(dòng)使元素框向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂Ｓ捎诟?dòng)框脫離了文檔的普通流，所以文檔的普通流中的框表現(xiàn)得就像浮動(dòng)框不存在一樣。浮動(dòng)使元素框向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂? 由于浮動(dòng)框脫離了文檔的普通流，所以文檔的普通流中的框表現(xiàn)得就像浮動(dòng)框不存在一樣。這段代碼： style .parent { width:...

wqj97 2019-04-22 16:12 評(píng)論0 收藏0
CSS清除浮動(dòng)float的三種方法總結(jié)，為什么清浮動(dòng)？浮動(dòng)會(huì)有那些影響？

摘要：方法三據(jù)說是最高大上的方法方法注意作用于浮動(dòng)元素的父親先說原理這種方法清除浮動(dòng)是現(xiàn)在網(wǎng)上最拉風(fēng)的一種清除浮動(dòng)，他就是利用和來在元素內(nèi)部插入兩個(gè)元素塊，從面達(dá)到清除浮動(dòng)的效果。的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實(shí)現(xiàn)清楚浮動(dòng)。一、拋一塊問題磚（display： block）先看現(xiàn)象： showImg(https://segmentfault.com/img/bVrWvS)...

MAX_zuo 2019-08-28 18:28 評(píng)論0 收藏0
清除浮動(dòng)方式總結(jié)

摘要：為什么要清除浮動(dòng)雖說是清除浮動(dòng)，其實(shí)是清除浮動(dòng)產(chǎn)生的影響。浮動(dòng)的元素，高度會(huì)塌陷，而高度的塌陷使我們布局中需要清除浮動(dòng)的最重要的原因之一。清除浮動(dòng)的方法父級(jí)定義原理父級(jí)手動(dòng)定義，就解決了父級(jí)無法自動(dòng)獲取到高度的問題。為什么要清除浮動(dòng)？雖說是清除浮動(dòng)，其實(shí)是清除浮動(dòng)產(chǎn)生的影響。浮動(dòng)的元素，高度會(huì)塌陷，而高度的塌陷使我們布局中需要清除浮動(dòng)的最重要的原因之一。清除浮動(dòng)的方法：父級(jí)di...

laoLiueizo 2019-08-30 12:49 評(píng)論0 收藏0