亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

浮動會讓父元素高度塌陷

<p></p> is block element, so its must be in the new line, not at the same line with the image

消除浮動帶來的影響：

1. clear:both 與外部有聯系

2. BFC/haslayout 封閉的結構

策略：

.fix:after{} 高級瀏覽器

.fix{} IE6,IE7

zoom:1能夠觸發haslayout特性，用于兼容IE6/7的清除浮動。但絕大多數現代瀏覽器不兼容。

以下是老師課程中關于清除浮動的總結，希望對你有幫助：

清除浮動的兩種基本方法：1、在高度塌陷的父元素底部插入具有clear:both聲明的元素，比如在html中插入一個多余的塊級元素div，或者插入不兼容IE6/7的CSS偽元素after。這種方法與外界有接觸，可能導致頂部margin重疊。2、觸發BFC/haslayout這兩種特性。與外界隔絕，沒有margin重疊問題。

BFC，Block formatting context是高級瀏覽器特有的概念，具有包裹性。不能應用于所有場景。

haslayout是IE6/7私有的概念。

下面是部分能夠觸發這兩種特性的屬性：?float:left/right、position:absolute/fixed、overflow:hidden/scroll (IE7+)、display:inline-block/table-cell(IE8+)、width/height/zoom:1/… (IE6/IE7)。

權衡以上問題后的清除浮動策略：

.clearfix:after { content: ''; display: block; height: 0; overflow: hidden; clear: both; }--使用CSS偽元素after，插入一個內容為空、高度為0的塊級元素來clear，并且用overflow的hidden觸發了BFC。

.clearfix { *zoom: 1; }--兼容IE6/7的寫法，觸發haslayout。

IE7不知道還用不用，

? 浮動的特性

浮動會讓inline元素block化

overflow:hidden 作用是超出區域則隱藏，不出現滾動條，作用于父元素。如果當前div沒有高寬限制，則隨內邊的容器而變化。
clear:both 就是清除浮動，作用于子元素。

http://www.cnblogs.com/socool-hu/p/5633110.html

clear會產生margin重疊而bfc不會，bfc會把包含內的所有css屬性作用與本身，不對外部造成影響，外部margin-top不會被其影響，而clear如果設置margin-bottom的話，會對外部其他元素造成影響，最明顯的就是margin重疊，

display:table之后，標簽并沒有變成table,而是有了table類似的屬性，比如自動包裹內容，自成一行等等。但是畢竟還不是table，所以和table的樣式沒有關系。

浮動的本質是文字環繞，圖片設置浮動，父元素高度塌陷，由于具有“包裹性”，實體依舊存在，與文字處于同一文檔流中，不會與文字重疊，形成文字包裹圖片的形式

【浮動與兩側皆自適應的流體布局】

/* 下面這個是固定布局寫法 */

.mib_cell { display: table-cell; *display: inline-block; width: 2000px; *width: auto; }

display:table-cell會觸發BFC,作用是清除浮動影響?

*號的作用是用于IE6/7的瀏覽器?

浮動與兩側皆自適應的流體布局，核心代碼?

左側div: float: left; ? 右側div: display: table-cell; width: 9999px; <---沒錯width就是 9999px

【浮動與單側尺寸固定的流體布局】

/* 下面這個是固定布局寫法 */

.mib_feed_fixed { width: 484px; float: left; }

/* 下面這個是流體布局寫法 */

.mib_feed_flow { display: table-cell; *display: inline-block; width: 2000px; *width: auto; }

【浮動與右側尺寸固定的流體布局】

/* 下面這個是右浮動，改變DOM位置的流體布局寫法 */

.mib_head_r { width: 56px; float: right; }

.mib_feed_flow { margin-right: 76px; }

/* 下面這個是左浮動，不改變DOM位置的流體布局寫法 */

.mib_full_float { width: 100%; float: left; }

.mib_head_l { width: 56px; float: left; margin-left: -56px;}

清除浮動帶來的影響：

.clearfix:after { content:""; display:table; clear:both;}

.clearfix { *zoom:1;}

應用在包含浮動子元素的父級元素上

兩種方法的差異： clear：與外界還有聯系，例如會產生margin重疊的效果?

BFC/haslayout（應用于父元素）:封閉，里面的聲明不會對外界產生影響，例如float不會出現margin重疊，但也有缺陷，無法使用所有瀏覽器

float去空格：

<script>

var trigger = document.getElementById("trigger"),

? ? ?buttons = document.getElementsByTagName("button");

var length = buttons.length;

if (trigger && length > 0) {

????trigger.onclick = function() {

????????for (var index = 0; index < length; index += 1) {

????????????buttons[index].style["cssFloat" in trigger.style? "cssFloat": "styleFloat"] = "left";

????????}

????};

}

</script>

第一個是使用了"clear:both"但是它會與margin重疊，則margin-botttom無法發揮作用；
第二個是使用了“overflow：hidden”使得元素BFC化，包裹好了，不影響margin-bottom發揮作用

1. html block 水平元素底部<div></div>

2. .clearfix:after