clear both巧妙解答

<

divstyle="border:2
px solid red;">
<
divstyle="float:left;width:80
px;height:80
px;border:1
px solid blue;">test div
div>
<
divstyle="float:left;width:90
px;height:90
px;border:1
px solid blue;">test div
div>
<
divstyle="float:left;width:100
px;height:100
px;border:1
px solid blue;">test div
div>
<
divstyle="clear:both;">
div>
div>
將這段**複製上去看效果就會明白

1.有

clear:both
的：

2.

無clear:both
的：

這樣看，應該就一目了然了：原來後邊的

clear:both;
其實就是利用清除浮動來把外層的
div撐開，所以有時候，我們在將內部
div都設定成浮動之後，

就會發現，外層

div的背景沒有顯示，原因就是外層的
div沒有撐開，太小，所以能看到的背景僅限於一條線。

但這種辦法就是最好了的嗎？

我這麼說，當然答案就不是了。可以採用通過
hack
實現：<
style>
.clearfix:after
* html.clearfix
*:first-child+html.clearfix
style>
<
body>
<
inputtype="button"class="btn btn-default"value="haode">
<
divclass="clearfix"style="border: 2
px solid red;">
<
divstyle="float:left;width: 80
px;height: 80
px;border: 1
px solid blue;">
test div
div>
div>

）、首先是利用

:after

這個偽類來相容ff、

chrome

等支援標準的瀏覽器。

:after

偽類ie

不支援，它用來和

content

屬性一起使用設定在物件後的內容，例如：

a:after

這個css

將會讓a

標籤內的文字後邊加上

link

文字文字。（2

）、利用「

*html

」這個只有

ie6認識的選擇符，設定縮放屬性「

zoom

: 1;

」實現相容

ie6。（3

）、利用「

*:first-child

+html

」這個只有

ie7認識的選擇符，設定縮放屬性「

zoom

: 1;

」實現相容

ie7。

數字遊戲 巧妙解答

小易邀請你玩乙個數字遊戲，小易給你一系列的整數。你們倆使用這些整數玩遊戲。每次小易會任意說乙個數字出來，然後你需要從這一系列數字中選取一部分出來讓它們的和等於小易所說的數字。例如 如果是你有的一系列數，小易說的數字是11.你可以得到方案2 2 7 11.如果頑皮的小易想坑你，他說的數字是6，那麼你沒...

正確理解 clear both

要注意以下幾點 1 浮動元素會被自動設定成塊級元素，相當於給元素設定了display block 塊級元素能設定寬和高，而行內元素則不可以 2 浮動元素後邊的非浮動元素顯示問題。3 多個浮動方向一致的元素使用流式排列，此時要注意浮動元素的高度。4 子元素全為浮動元素的元素高度自適應問題。以下詳細分析...

正確理解 clear both

原文 要注意以下幾點 1 浮動元素會被自動設定成塊級元素，相當於給元素設定了display block 塊級元素能設定寬和高，而行內元素則不可以 2 浮動元素後邊的非浮動元素顯示問題。3 多個浮動方向一致的元素使用流式排列，此時要注意浮動元素的高度。4 子元素全為浮動元素的元素高度自適應問題。以下詳...