1.浮動的原理：主要是實現文字環繞效果。會導致父元素高度塌陷。
清除浮動的方法一：clear:both;這個css效果是設定在所有浮動元素之後的。
左（#left）
中（#center）
右（#right）
三個元素都設定了向左浮動，會導致父元素#main高度塌陷，我們可以在末尾新增乙個空元素
來清除浮動。其css為。.clearfix,原理是清除其左右兩邊的浮動，它是想清除其他元素的浮動對自己造成的影響。.clearfix會按照左右兩側不浮動來定位自己的位置，而父容器看到有乙個非浮動的，普通流的子元素，所以要包裹這個子元素，因此將其包圍，也包圍了浮動元素。新增的這個元素一定要是塊級元素，內聯元素不行。
#left#center
#right
清除浮動的方法二 在父元素main上新增乙個class為clearfix,其有css如下
.cleafix
:after
.clearfix
清除浮動第三個方法：
將父元素設定成:float:left;或者overflow:hidden;形成乙個塊級格式上下文。
bfc:blocking formatting context(塊級格式上下文) 決定如何渲染文件的容器。
bfc布局規則：bfc的內部元素的布局不會影響外部元素，就是乙個隔離的容器。bfc中的box會在垂直方向上一次排列。在同乙個bfc中，垂直方向上的距離由margin決定，而且相鄰兩個margin會相互重疊。如果兩個都是正數，取較大的margin,如果想個都是負值，取絕對值較大的值，如果乙個是正乙個是負，直接相加。bfc區域不會與float box重疊。當bfc外部有浮動的時候，為了不影響內部的布局，bfc會通過變窄，不與外部浮動元素產生重疊，當bfc內部有浮動元素的時候，為了不影響外部布局，在計算高度的時候要就算內部浮動元素的高度。
哪些元素會產生bfc:
1.float屬性不為none,2根元素，3.position:不為ralative和static，4.overflow:不為visible,5display：為inline-box,table-cell,table-caption,flex,inline-flex;
浮動理解及清除浮動
浮動是css裡布局使用最多的屬性。浮動之後，元素會脫離文件流，緊貼上乙個浮動盒子的邊。一旦我們設定了浮動，那麼該元素就能夠併排展示，而且可以設定寬和高。float right float left 浮動元素會緊貼上乙個浮動元素。若寬度不夠，會換行。頂部頂帖上乙個浮動元素的底部。浮動方向是要一直。di...
對css浮動的理解以及清除浮動
首先我們要了解什麼是浮動，在css中浮動就是使元素及元素內容脫離文件流，並且使其移動到其父元素的最左或最右邊。移動到其父元素的最左或最右邊 是指向左或向右移動直至碰到另乙個浮動元素或是父元素的邊界 不包括padding 如何清除浮動？通常我們最普遍的作法是直接清除浮動 clear both 但是這樣...
理解為何需要清除浮動及清除浮動的方法
一 為何要清除浮動 作為乙個前端er肯定會要用到float屬性。浮動的框可以左右移動，直到遇到另乙個浮動框或者遇到它外邊緣的包含框。浮動框不屬於文件流中的普通流，當元素浮動之後，不會影響塊級元素的布局，只會影響內聯元素布局。此時文件流中的普通流就會表現得該浮動框不存在一樣的布局模式。當包含框的高度小...