1 .6個子容器未設定浮動的狀態如下
子容器1
子容器2
水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水
水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水
水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水
子容器3
子容器4
子容器5
子容器6
2.子容器1設定向左浮動，子容器2設定為block塊級元素，子容器3設定向右浮動
3.分析下上圖元素的渲染過程
——子容器1：向左浮動，被推至其所在行的最左邊，因為是第乙個子元素所以在第一行，效果就是推至父容器的左上角
——子容器2：因為塊級元素無法感知浮動元素的存在，也就是說在它看來1是不存在的，所以也被推到父容器的左上角，因此子容器2和1產生重疊，且塊級元素2會被浮動元素1遮蓋
——匿名元素：就是父容器裡的文字「水」，文字可以感知到浮動元素，形成環繞效果；2為block塊級元素，所以文字就直接在2的下一行開始排列，但是因為能感知到浮動元素1的存在，所以就被推到1的邊緣開始環繞排列
——子容器3：向右浮動，被推至其所在行的最右邊
——子容器4：inline元素能感知到浮動元素，形成環繞效果；3向右浮動了，所以它原來的位置空了出來由子容器4補上，但因能感知到浮動元素3的存在，所以該行空出的位置放不下子容器4後，inline元素子容器4會選擇把自己斷開將放不下的部分放在下一行顯示；從這也能看出inline元素設定height和width是無效的，因為它保持不了矩形
4.總結：
——inline元素設定height和width是無效的，但是如果設定了float為left 或right，就自動變成了block塊級元素，高寬的設定就生效了
——對父容器影響：父容器無法感知浮動元素存在，可能會造成高度坍塌，需要清除浮動。
對其他浮動元素： 浮動元素可以感知到浮動元素，高度不一樣可能會出現卡住現象。
對普通元素：普通元素（block、inline-block）無法感知浮動元素存在，會被浮動元素遮蓋。
文字和inline元素： 文字和行內元素可以感知到浮動元素，會形成環繞效果。
——先渲染浮動元素，後渲染普通塊級元素
理解CSS浮動float 定位position
一 浮動float i 定義及規則 float預設為none,對應標準流的情況。當float left 時，元素就會向其父元素的左側靠緊，脫離標準流，同時寬度不再伸展至充滿父容器，而是根據自身內容來確定。ii 演示規則 準備 xml html code複製內容到剪貼簿 wxdwhjv 1 中間給 f...
float浮動，定位
1 浮動定位 1 普通流定位 普通流，由稱為文件流 塊級元素 從上到下乙個乙個的排列 行內元素 一行內從左到右的排列 2 浮動定位 2.1 什麼是浮動定位 將元素排列在普通流之外，即脫離文件流 浮動元素不會佔據頁面空間 浮動元素會放置在 包含框 的左邊或右邊 浮動元素依舊位於包含框之內 浮動元素可以...
CSS 浮動元素（float）的認識
float屬性的值可以是left right或者none。用兩個例子來說明吧 1 混排 causas naturales et antecedentes,idciro etiam nostrarum voluntatum.picture 2 一行兩列 xhtml example source cod...