盒模型是有兩種標準的，乙個是標準模型，乙個是ie模型。
這裡用到了css3 的屬性 box-sizing
/* 標準模型 */行內元素對margin的支援box-sizing:content-box;
/*ie模型*/
box-sizing:border-box;
行內元素不支援margin-top與margin-bottom。塊級元素及行內塊沒有這個問題。
行內元素對padding的支援
行內元素設定padding-top會向上延伸一段距離，會覆蓋住上面的節點。padding-bottom會向下延伸一段距離，會覆蓋住下面的節點。塊級元素及行內塊沒有這個問題。
通過js獲取盒模型對應的寬和高，有以下幾種方法：
為了方便書寫，以下用dom來表示獲取的html的節點。
1. dom.style.width/height
這種方式只能取到dom元素內聯樣式所設定的寬高，也就是說如果該節點的樣式是在style標籤中或外聯的css檔案中設定的話，通過這種方法是獲取不到dom的寬高的。
2. dom.currentstyle.width/height
這種方式獲取的是在頁面渲染完成後的結果，就是說不管是哪種方式設定的樣式，都能獲取到。
但這種方式只有ie瀏覽器支援。
3. window.getcomputedstyle(dom).width/height
這種方式的原理和2是一樣的，這個可以相容更多的瀏覽器，通用性好一些。
4. dom.getboundingclientrect().width/height
這種方式是根據元素在視窗中的絕對位置來獲取寬高的
5.dom.offsetwidth/offsetheight
這個就沒什麼好說的了，最常用的，也是相容最好的。
父元素沒有設定margin-top，而子元素設定了margin-top：20px;可以看出，父元素也一起有了邊距。
首先要明確bfc是什麼意思，其全英文拼寫為 block formatting context 直譯為「塊級格式化上下文」
內部的box會在垂直方向，乙個接乙個的放置
每個元素的margin box的左邊，與包含塊border box的左邊相接觸（對於從右往左的格式化，否則相反）
box垂直方向的距離由margin決定，屬於同乙個bfc的兩個相鄰box的margin會發生重疊
bfc的區域不會與浮動區域的box重疊
bfc是乙個頁面上的獨立的容器，外面的元素不會影響bfc裡的元素，反過來，裡面的也不會影響外面的
計算bfc高度的時候，浮動元素也會參與計算
float屬性不為none（脫離文件流）
position為absolute或fixed
display為inline-block,table-cell,table-caption,flex,inline-flex
overflow不為visible
根元素自適應兩欄布局
清除內部浮動
防止垂直margin重疊
浮動對頁面的影響：
如果乙個父盒子中有乙個子盒子，並且父盒子沒有設定高，子盒子在父盒子中進行了浮動，那麼將來父盒子的高度為0.由於父盒子的高度為0，
下面的元素會自動補位，所以這個時候要進行浮動的清除。
方式一:使用overflow屬性來清除浮動
.ovh{
overflow:hidden;
先找到浮動盒子的父元素，再在父元素中新增乙個屬性：overflow:hidden,就是清除這個父元素中的子元素浮動對頁面的影響.
注意：一般情況下也不會使用這種方式，因為overflow:hidden有乙個特點，離開了這個元素所在的區域以後會被隱藏（overflow:hidden會將超出的部分隱藏起來）.
方式二:使用額外標籤法
.clear{
clear:both;
在浮動的盒子之下再放乙個標籤，在這個標籤中使用clear:both，來清除浮動對頁面的影響.
a.內部標籤：會將這個浮動盒子的父盒子高度重新撐開.
b.外部標籤：會將這個浮動盒子的影響清除，但是不會撐開父盒子.
注意：一般情況下不會使用這一種方式來清除浮動。因為這種清除浮動的方式會增加頁面的標籤，造成結構的混亂.
方法三:使用偽元素來清除浮動(after意思:後來,以後)
.clearfix:after{
content:"";//設定內容為空
height:0;//高度為0
line-height:0;//行高為0
display:block;//將文字轉為塊級元素
visibility:hidden;//將元素隱藏
clear:both//清除浮動
.clearfix{
zoom:1;為了相容ie
方法四:使用雙偽元素清除浮動
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
.clearfix {
zoom: 1;
總結:第一種方法會將超出部分隱藏在某些時候我們想清除浮動並且保留超出部分時做不到,第二種方法會增加許多不必要的標籤,
所以我們盡量使用第三種方法來清除浮動,為什麼不選擇第四種方法呢?因為第四種是第三種的改良版
CSS盒模型與浮動
box sizing屬性用於改變元素width和height值的具體意義 段落p 標題h1或div等元素是塊級元素，它們生成塊級框，各個框體是縱向堆疊的 即 換行 任何元素可以由display block宣告為塊級元素。注 通過css的display屬性，是可以改變html文件中元素預設的布局方式的...
css 標準流 盒模型 浮動
一 盒模型 1.1 盒子的區域 乙個盒子的主要屬性5個 width height padding border margin padding 內邊距 border 邊框 margin 外邊框 1.2 認識width height 乙個盒子的真實占有的寬度 左border 左padding width...
css中的浮動及清除浮動
float 文件流1.float left right none inherit 2.文件流是文件中可顯示物件在排列時所占用的位置。3.浮動的定義 在非ie瀏覽器下，當容器的高度為auto，且容器中的內容中有浮動的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢位到容器外面而影...