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

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