當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

零基础学前端开发技术之第七章浮动塌陷

發布時間：2024/1/23 HTML 31 豆豆

生活随笔收集整理的這篇文章主要介紹了零基础学前端开发技术之第七章浮动塌陷小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

知識點：
1.浮動塌陷的概念
2.浮動塌陷的解決
1：浮動塌陷的概念

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>浮動塌陷的出現</title><style>#father{border:1px solid #f00;}div#son1{width:200px;background-color: aquamarine;float:left;}div#son2{width:200px;background-color: blanchedalmond;float: left;}</style></head><body><div id="father"><div id="son1">子容器一</div><div id="son2">子容器二</div></div></body> </html>

2.常見布局

總結：

布局，大致的頁面框架，盒子結構圖。綜合使用標準流、浮動。1.左右2.三欄3.通欄

通欄設計

碰到白底的，先設計成其他色底部或加有色邊框

技巧：

1.先標準流定父位置，浮動定子元素位置。

2.浮動影響后面的標準流，不影響前面的標準流。

3.浮動塌陷

1.原因

浮動的子元素，脫離標準文檔流。

2.為什么要清除浮動

2.1 父級沒高度

2.2 子盒子浮動

2.3影響布局，清除浮動

3.方法：

3.1 額外標簽法

設置clear屬性，下面為4個值;

none：允許兩邊都可以有浮動對象
both：不允許有浮動對象
left：不允許左邊有浮動對象
right：不允許右邊有浮動對象

一般用clear:both，空標簽必須是塊級元素或br

思考？

問題:

會在元素末尾，增加一個額外的標簽(空div或br)，我們前端設計人員看到這個額外標簽的時候會發現

無內容，默認可能會刪除。導致出現塌陷。這個是W3C推薦，但是我們不推薦用。

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#father {border: 1px solid #0f0;}img {width: 150px;}#father div:nth-child(1),#father div:nth-child(3) {border: 1px dotted blue;float: left;/* height: 80px; */}#father div:nth-child(2) {border: 1px solid yellow;float: right;height: 100px;}/* 設置空的div */#father div:last-child {/* clear: none; 相當于，我沒有解決浮動塌陷 *//* width: 100%; *//* border: 1px solid purple; *//* float: right; *//* clear: left; *//*不允許左邊有浮動塌陷;*//* clear: right; 不允許右邊有浮動塌陷 *//* clear: both; 清除左邊和右邊的浮動塌陷 */clear: both;}</style> </head><body><div id="father"><div><img src="img/1.jpg" alt=""></div><div><img src="img/2.jpg" alt=""></div><div><img src="img/3.jpg" alt=""></div><div></div></div> </body></html>

3.2 父級元素修飾法

子不教，父之過：

父元素進行

overflow:autohidden scroll <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#fu {border: 1px solid #f00;/* 在父元素，增加限定的修飾 *//* auto:當子元素顯示不全的時候，會出現滾動條，讓下面的滾動顯示. *//* overflow: auto; *//* hidden:只顯示部分字體內容 *//* overflow: hidden; *//* 滾動模式:橫縱滾動條，現在只有縱向可以動； */overflow: scroll;}#fu div {width: 80px;height: 80px;background-color: red;margin-left: 10px;float: left;}</style> </head><body><div id="fu"><div>兒子1</div><div>兒子2</div></div> </body></html>

3.3 父級添加after偽類法

.clear:after {content: "";display: block;height: 0;clear: both;visibility: hidden;}.clear { 父級元素；*zoom: 1;/*為了兼容老式IE6 7*/} <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#fu {border: 1px solid #00f;}#fu>div {width: 80px;height: 80px;margin-left: 5px;background-color: gray;float: left;}/* 父級元素偽類法：將第一種方式，結合偽類來做了操作；父級元素，下面有個偽類,after；表示父級元素的后面這種方式用的比較多，可以多加練習。*/#fu:after {/* content:內容 */content: "";/* 塊顯示 */display: block;/* 設置高度為0，就不在父級元素了,相當于類似空的標簽 */height: 0;/* 清除浮動 */clear: both;/* visibility: hidden; */visibility: hidden;}</style> </head><body><div id="fu" class="clear"><div>1</div><div>2</div></div><p>想到了嗎？？？</p> </body></html>

3.4 父級添加雙偽元素法

.clearFix::after,.clearFix::before {content: '.';line-height: 0;font-size: 0;height: 0;display: block;clear: both;} <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#fu {border: 1px solid #0f0f0f;}#fu>div {width: 80px;height: 80px;margin-left: 10px;background-color: wheat;float: left;}/* 偽元素選擇器+父元素，有的廠商，mi 用這個；會兼容到之前低版本的瀏覽器.IE版本，上沒有實現；換一種方式，來處理一下；*/#fu::after,#fu::before {content: '.';line-height: 0;font-size: 0;height: 0;display: block;clear: both;}</style> </head><body><div id="fu"><div></div><div></div></div> </body></html>

總結

以上是生活随笔為你收集整理的零基础学前端开发技术之第七章浮动塌陷的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

HTML

零基础学前端开发技术之第七章 浮动塌陷

總結

零基础学前端开发技术之第七章浮动塌陷