Web前端開發(fā)技術(shù)項(xiàng)目教程（HTML5 CSS3 JavaScript）（微課版） 課件 7.2.2知識(shí)點(diǎn)1：元素浮動(dòng)

元素浮動(dòng)信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開發(fā)》前端技術(shù)開發(fā)知識(shí)儲(chǔ)備浮動(dòng)設(shè)置1清除浮動(dòng)201浮動(dòng)設(shè)置前端技術(shù)開發(fā)01浮動(dòng)設(shè)置浮動(dòng)屬性語法：float:none|left|right值描述none默認(rèn)值，不浮動(dòng)，元素處在標(biāo)準(zhǔn)流中l(wèi)eft向左浮動(dòng)right向右浮動(dòng)在標(biāo)準(zhǔn)流中，一般情況下一個(gè)塊級元素在水平方向上會(huì)自動(dòng)伸展，直至父元素的邊界，而在垂直方向上則會(huì)和兄弟元素依次上下排列，但不能并排。使用浮動(dòng)后，塊級元素將改變自身行為。設(shè)置浮動(dòng)之后，這些元素將脫離標(biāo)準(zhǔn)流，這樣會(huì)影響后續(xù)元素的顯示位置。說明：01浮動(dòng)設(shè)置將塊級元素設(shè)置向左浮動(dòng)從左到右排列，元素寬度變?yōu)閮?nèi)容大小塊級元素上下排列float：left;這些元素將脫離文檔流，仍在文檔流中的父元素和后續(xù)元素會(huì)認(rèn)為這些“不存在”。01浮動(dòng)設(shè)置將塊級元素設(shè)置向右浮動(dòng)從右到左排列，元素寬度變?yōu)閮?nèi)容大小塊級元素上下排列float：right;這些元素將脫離文檔流，仍在文檔流中的父元素和后續(xù)元素會(huì)認(rèn)為這些“不存在”。元素會(huì)向其父元素的右側(cè)靠緊，觀察設(shè)置了向左浮動(dòng)和向右浮動(dòng)元素的排列順序。01浮動(dòng)設(shè)置浮動(dòng)設(shè)置對相鄰元素的影響-塊級元素例如：后續(xù)元素是塊級元素段落p相鄰元素段落p浮動(dòng)元素div前面的div元素設(shè)置向左浮動(dòng)后，后續(xù)的段落元素會(huì)發(fā)生空間上的重疊，段落元素在div元素下方顯示，同時(shí)段落文字會(huì)在div元素右側(cè)呈現(xiàn)擠出效應(yīng)。<div>…</div><p>…</p>01浮動(dòng)設(shè)置浮動(dòng)設(shè)置對相鄰元素的影響-行內(nèi)元素例如：后續(xù)元素是行內(nèi)元素span相鄰元素span浮動(dòng)元素div在標(biāo)準(zhǔn)流中的相鄰span元素會(huì)緊跟在浮動(dòng)元素div的右邊，當(dāng)縮放窗口時(shí)，后側(cè)的空間放不下span元素后，行內(nèi)元素span會(huì)自動(dòng)換行。<div>…</div><span>…</span><span>…</span>01浮動(dòng)設(shè)置浮動(dòng)設(shè)置對父元素的影響例如：父元素是div元素，包含3個(gè)div子元素。子元素設(shè)置浮動(dòng)后，脫離標(biāo)準(zhǔn)流，但父元素仍在標(biāo)準(zhǔn)流里，可以這樣理解，父元素認(rèn)為子元素“不存在”了，所以高度為0，只顯示上下邊框的高度。浮動(dòng)子元素div外面父元素div設(shè)置浮動(dòng)父元素div如何消除設(shè)置浮動(dòng)后帶來的“副作用”？02清除浮動(dòng)前端技術(shù)開發(fā)02清除浮動(dòng)清除浮動(dòng)屬性：clear:none|both|left|right值描述none默認(rèn)值。允許浮動(dòng)元素出現(xiàn)在兩側(cè)both在左右兩側(cè)均不允許浮動(dòng)元素right在右側(cè)不允許浮動(dòng)元素left在左側(cè)不允許浮動(dòng)元素設(shè)置清除浮動(dòng)clear屬性的元素并不是清除本身元素的浮動(dòng)效果，而是該元素在指定側(cè)不與設(shè)置了浮動(dòng)屬性的元素在同一行顯示。clear屬性的取值02清除浮動(dòng)設(shè)置清除浮動(dòng)將第2個(gè)div元素設(shè)置“clear：left”，表示第2個(gè)元素的左側(cè)不允許出現(xiàn)浮動(dòng)元素。如果將CSS語句設(shè)置為“clear：both”，第3個(gè)div元素是否會(huì)換行顯示