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

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

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

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

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

4、脫離文檔流 5、提升層級(jí)半層float/文檔流float:left|right|none|inherit;文檔流是文檔中可顯示對(duì)象在排列時(shí)所占用的位置。浮動(dòng)的定義：使元素脫離文檔流，按照指定方向發(fā)生移動(dòng)，遇到父級(jí)邊界或者相鄰的浮動(dòng)元素停了下來。clear:left|right|both|none|inherit；元素的某個(gè)方向上不能有浮動(dòng)元素 clear:both;在左右兩側(cè)均不允許浮動(dòng)元素。清浮動(dòng)方法1.加高問題：擴(kuò)展性不好2.父級(jí)浮動(dòng)問題：頁面中所有元素都加浮動(dòng)，margin左右自動(dòng)失效（floatsbad！）3.inline-block清浮動(dòng)方法： 問題：margin左右自動(dòng)失效；4.空標(biāo)簽清浮動(dòng)問題：IE6最小高度19px；（解決后IE6下還有2px偏差）清浮動(dòng)方法5.br清浮動(dòng)問題：不符合工作中：結(jié)構(gòu)、樣式、行為，三者分離的要求。6.after偽類清浮動(dòng)方法（現(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)容計(jì)算寬高。 b、FF不支持；清浮動(dòng)方法7.overflow:hidden清浮動(dòng)方法； 問題：需要配合寬度或者zoom兼容IE6IE7；overflow:scroll|auto|hidden； overflow:hidden;溢出隱藏（裁刀！）浮動(dòng)兼容性問題IE6雙邊距BUG（IE6下塊屬性標(biāo)簽浮動(dòng)，并且有橫向margin，橫向margin加倍。）： a、IE6 b、浮動(dòng) c、橫向margin d、塊屬性標(biāo)簽（加display:inline;）IE6下li部分兼容性問題： a、左右兩列布局，右邊右浮動(dòng)IE6IE7下折行；(左邊元素浮動(dòng)) b、IE6IE7li下元素都浮動(dòng)在IE6IE7下li下方會(huì)產(chǎn)生4px間隙問題；（加vertical-align:top；）vertival-align/img問題vertical-align垂直對(duì)齊方式a、加垂直對(duì)齊方式的同排元素都要加垂直對(duì)齊方式；b、垂直對(duì)齊方式可以解決元素下方間隙問題；圖片下方間隙問題 a、display:block;(改變