1.用float的時候要注意，子元素總寬或者總高不要超過父容器，包括border。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="father" style="width:600px;height:800px;border:2px solid black;"> <div id="son" style="width:50%;height:100%;float:left;"> </div> <div id="son2" style="width:50%;height:100%;border:2px solid blue;float:left;"> </div> </div> </body> </html>
2.用margin:xx auto;居中的時候，應用margin的元素出現不居中的效果是因為，有時候內容是一些行內元素，你不設置它的寬度他默認就是證據一整行（看下面圖）。而margin是以元素的邊框為依據的，所以沒有任何效果。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="father" style="width:600px;height:800px;border:2px solid black;"> <div id="son" style="width:50%;height:100%;border:2px solid red;float:left;"> <div> <h3 style="border:1px solid green;margin:20px auto;">測試例子</h3> </div> </div> <div id="son2" style="width:48%;height:100%;border:2px solid blue;float:left;"> </div> </div> </body> </html>
3.解決方案：
①給定元素一個寬度（其實就是具體化它的邊框），很大的缺點是，你大部分時候並不想定性你的元素大小，而且你定了以后，直觀的看到的是內容，所以人不一定是居中的。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="father" style="width:600px;height:800px;border:2px solid black;"> <div id="son" style="width:50%;height:100%;border:2px solid red;float:left;"> <div> <h3 style="border:1px solid green;margin:20px auto;width:100px;">測試例子</h3> </div> </div> <div id="son2" style="width:48%;height:100%;border:2px solid blue;float:left;"> </div> </div> </body> </html>
②對上一層最近的div使用text-align:center。不用設置元素大小，操作少，比較簡單，能達到效果。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="father" style="width:600px;height:800px;border:2px solid black;"> <div id="son" style="width:50%;height:100%;border:2px solid red;float:left;"> <div style="text-align:center;"> <h3 style="border:1px solid green;margin:20px auto;">測試例子</h3> </div> </div> <div id="son2" style="width:48%;height:100%;border:2px solid blue;float:left;"> </div> </div> </body> </html>
時間寶貴：1.margin居中失效原因：行內元素本身就占據一行，左右邊框已經居中（0px），沒有居中是因為內容沒居中。
2.解決方法：①給這個元素設置寬度。
②給他的父級元素應用--text-align：center；
③給這個元素自己應用--》display:block;text-align;
*3.講道理的話，這里用padding來給內容居中是很舒服的，讓內容在元素里居中嘛。但是呢，padding沒有這種xx auto的設置。其實同樣的想法，內容層本身其實是居中的，兩邊padding都是0px嘛，只是你的東西沒把內容層撐滿，看去不居中嗯了。深究到底，其實行級元素它占據的一行，是內容層占據了一行。而應用margin，padding，border的時候都是在切割內容層的上下左右，因為一行的寬度其實是定的，這3個來拿地方了，內容層就小了。而我們平常設置的width，height是對內容層而言的，是在設置內容層的寬高。內容層像一杯牛奶，本身沒有任何而言，然后margin，padding，border像一瓶牛奶的盒子，一箱牛奶的盒子（現實中只不過這些盒子外殼都是一樣厚的）不然放在超市，透明看去，喝的牛奶部分並不是居中的。網頁的渲染，某個父級元素給子元素的你的一行寬是固定的，不設置margin，border，padding，內容是占據整行的，如果你設置margin，border，padding，父級給你的行寬是固定的，你要放下一個帶包裝盒的牛奶，沒辦法，要弄點牛奶掉來給點位置放包裝盒。所以我們常常設置的margin，padding，是在擠占內容層的大小，所以要小心規划這些值，不然你要顯示的東西就會很奇怪，可能被擠占的內容層就不夠放置要顯示的元素了。
4.用了margin:xx auto；的元素不能用float。
5.很多樣式的奇怪原因都是源自塊級元素和行級元素的不同，但是我們要始終關注，內容層才是我們的布局目標。