零基础学前端开发技术之第七章 浮动塌陷
生活随笔
收集整理的這篇文章主要介紹了
零基础学前端开发技术之第七章 浮动塌陷
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
知識點：
1.浮動塌陷的概念
2.浮動塌陷的解決
1：浮動塌陷的概念
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或br --><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<!-- <p>設置或檢索是否顯示對象。與display屬性不同，此屬性為隱藏的對象保留其占據的物理空間如果希望對象為可視，其父對象也必須是可視的。對應的腳本特性為visibility。</p> --></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>總結
以上是生活随笔為你收集整理的零基础学前端开发技术之第七章 浮动塌陷的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 图书要出版啦
- 下一篇： HTMLCSS课堂笔记