第04浮動原理及課件作業(yè)

2023/3/13CSS第三課浮動inline-block/float（浮動）回顧:inline-block特性：

1、塊在一排顯示2、內(nèi)聯(lián)支持寬高3、默認(rèn)內(nèi)容撐開寬度4、標(biāo)簽之間的換行間隙被解析（問題）5、ie6ie7不支持塊屬性標(biāo)簽的inline-block（問題）float浮動：1、塊在一排顯示

2、內(nèi)聯(lián)支持寬高

3、默認(rèn)內(nèi)容撐開寬度

4、脫離文檔流 5、提升層級半層float/文檔流float:left|right|none|inherit;文檔流是文檔中可顯示對象在排列時所占用的位置。浮動的定義：使元素脫離文檔流，按照指定方向發(fā)生移動，遇到父級邊界或者相鄰的浮動元素停了下來。clear:left|right|both|none|inherit；元素的某個方向上不能有浮動元素 clear:both;在左右兩側(cè)均不允許浮動元素。清浮動方法1.加高問題：擴展性不好2.父級浮動問題：頁面中所有元素都加浮動，margin左右自動失效（floatsbad?。?.inline-block清浮動方法： 問題：margin左右自動失效；4.空標(biāo)簽清浮動問題：IE6最小高度19px；（解決后IE6下還有2px偏差）清浮動方法5.br清浮動問題：不符合工作中：結(jié)構(gòu)、樣式、行為，三者分離的要求。6.after偽類清浮動方法（現(xiàn)在主流方法）.clear:after{content:'';display:block;clear:both;}.clear{zoom:1;}after偽類：元素內(nèi)部末尾添加內(nèi)容； :after{content"添加的內(nèi)容";}IE6，7下不兼容zoom縮放

a、觸發(fā)IE下haslayout，使元素根據(jù)自身內(nèi)容計算寬高。 b、FF不支持；清浮動方法7.overflow:hidden清浮動方法； 問題：需要配合寬度或者zoom兼容IE6IE7；overflow:scroll|auto|hidden； overflow:hidden;溢出隱藏（裁刀?。└蛹嫒菪詥栴}IE6雙邊距BUG（IE6下塊屬性標(biāo)簽浮動，并且有橫向margin，橫向margin加倍。）： a、IE6 b、浮動 c、橫向margin d、塊屬性標(biāo)簽（加display:inline;）IE6下li部分兼容性問題： a、左右兩列布局，右邊右浮動IE6IE7下折行；(左邊元素浮動) b、IE6IE7li下元素都浮動在IE6IE7下li下方會產(chǎn)生4px間隙問題；（加vertical-align:top；）vertival-align/img問題vertical-align垂直對齊方式a、加垂直對齊方式的同排元素都要加垂直對齊方式；b、垂直對齊方式可以解決元素下方間隙問題；圖片下方間隙問題 a、display:block;(改變