Web前端開發(fā)（HTML5+CSS3+JavaScript） 課件 第6章 6.2-浮動(dòng)

Web前端基礎(chǔ)技術(shù)CSSJSHTML第6章浮動(dòng)Contents目錄浮動(dòng)一、浮動(dòng)浮動(dòng)是指元素脫離原來的位置，在原來位置上“浮動(dòng)”出來，不再占據(jù)父元素的空間，并具有行內(nèi)塊特征（不換行、可改變大?。?。類似絕對(duì)定位元素，區(qū)別在僅浮動(dòng)的元素不能直接改變其位置。目的：使多個(gè)浮動(dòng)元素水平排列。應(yīng)用：水平導(dǎo)航菜單

；浮動(dòng)列布局用法：float:left左浮動(dòng)，多個(gè)浮動(dòng)元素逐個(gè)從左到右緊密排列。float:right右浮動(dòng)，多個(gè)浮動(dòng)元素逐個(gè)從右到左緊密排列取值為none取消浮動(dòng)。特性：1.浮動(dòng)元素不再占據(jù)父元素空間，父元素高度為0；具有行內(nèi)塊特征（不換行，超過容器寬度才折行；大小默認(rèn)由內(nèi)容決定，可以改變寬度、高度）。2.有副作用：后續(xù)非浮動(dòng)元素將占用浮動(dòng)元素原有空間，且其后所有元素的文本將環(huán)繞浮動(dòng)元素。鏈接1鏈接2鏈接3鏈接412例1認(rèn)識(shí)float特性，以及如何消除浮動(dòng)帶來的影響。<divclass="container"><divclass="fl">div1</div><divclass="fl">div2</div></div><divclass="no-fl">正常元素</div><style>*{

box-sizing:border-box;

}.container{

width:400px;

border:10pxsolidred;

}.container>*{height:40px;background-color:yellow;border:2pxsolidblack;}.no-fl{background-color:green;height:40px;width:400px;}</style>1.正常布局2.div1、div2浮動(dòng)在原來位置/*1.使1,2浮動(dòng)*//**/

.container>.fl{float:left;}1.浮動(dòng)元素不再占據(jù)父元素空間，具有行內(nèi)塊特征（大小默認(rèn)由內(nèi)容決定，可以改變寬度、高度）---父元素的高度為0.2.后續(xù)非浮動(dòng)元素將占用浮動(dòng)元素原有空間，但后續(xù)所有元素的文本將環(huán)繞浮動(dòng)元素。---副作用3.期待如下正常效果1.浮動(dòng)元素在父元素水平排列，父元素大小由浮動(dòng)元素決定2.不影響后續(xù)元素布局1.父元素使用：overflow：hidden樣式。---如果浮動(dòng)元素的父元素不存在超出其區(qū)域的子元素。2.父元素設(shè)置高度。---如果浮動(dòng)元素的父元素存在超出其區(qū)域的子元素。3.在最后一個(gè)浮動(dòng)元素之后使用具有clear:both的樣式div來清除浮動(dòng)。.container{

/*...*//*height:60px;*/overflow:hidden;}<divclass="container"><divclass="fl">div1</div><divclass="fl">div2</div>

<divstyle="height:0;border:none;clear:both;"></div></div><divclass="no-fl">正常元素</div>123用于包含浮動(dòng)子元素的父元素時(shí)：使一個(gè)塊元素成為一個(gè)獨(dú)立的元素---重點(diǎn)在于“獨(dú)立”的理解：1.不影響父元素外部元素：文字不會(huì)因?yàn)榇嬖诟?dòng)元素而產(chǎn)生環(huán)繞;2.父元素的高度由子元素的內(nèi)容決定認(rèn)識(shí)樣式屬性overflow特性：本意是溢出塊尺寸的的內(nèi)容如何處理消除浮動(dòng)的影響措施，使用以下方法之一：例2float樣式屬性的典型應(yīng)用1：水平導(dǎo)航欄<ul><li><ahref="#">首頁</a></li><li><ahref="#">博客</a></li><li><ahref="#">程序員學(xué)院</a></li><li><ahref="#">下載</a></li><li><ahref="#">論壇</a></li><li><ahref="#">問答</a></li><li><ahref="#">代碼</a></li><li><ahref="#">直播</a></li><li><ahref="#">能力認(rèn)證</a></li><li><ahref="#">高校</a></li></ul>

測(cè)試容器ul后的元素：這是后面的的文字,是否受到浮動(dòng)的影響li左浮動(dòng)浮動(dòng)元素的父元素不存在超出其區(qū)域的子元素

具體實(shí)現(xiàn)<style>ul{list-style:none;padding:0;margin:0;/*border:2pxsolidred;*//*方法1*/overflow:hidden;}li{float:left;}

/*方法2*//*ul::after{content:'';display:block;clear:both;}*/a{display:block;padding:20px;text-decoration:none;color:#333;}

/*準(zhǔn)備背景圖片顯示區(qū)域*/ul{padding-left:100px;background-image:url('./csdn.png');background-repeat:no-repeat;background-position:leftcenter;/*寬度100px高度自動(dòng)*/background-size:100px;}/*首頁鏈接顯示上邊框*/li:nth-of-type(1)a{border-top:2pxsolidred;}例3float樣式屬性的典型應(yīng)用2：列布局<h3>三列浮動(dòng)布局：高度適應(yīng)內(nèi)容</h3><divclass="container"><divclass="left">左邊</div><divclass="middle">中間</div><divclass="right">右邊</div></div>*{box-sizing:border-box;}.container{width:800px;border:1pxsolidgray;

/*消除浮動(dòng)的影響*/overflow:hidden;}.container>div{float:left;min-height:100px;border:1pxsolid#ccc;