<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>test</title>
????<style?type="text/css">
????html,
????body?{
????????margin:?0;
????????padding:?0;
????}
??.wrapper?{
????????overflow:?hidden;
????}
????.left?{
????????float:?left;
????????width:?300px;
????????background:?pink;
????}
????.right?{
????????float:?right;
????????width:?300px;
????????background:?pink;
????}
????.center?{
????????margin:0?300px;
????????
????????background:?gray;
????}
????</style>
</head>
<body>
????<div?class="wrapper">
????????<div?class="left">zuo</div>
????????<div?class="center">左右兩列固定，中間自適應</div>
????????<div?class="right">you</div>
????</div>
????<script?type="text/javascript">
????</script>
</body>
</html>
2018-11-08
因為div.center是個塊元素，當.div.right在設置浮動前位置在div.center后，且在它下面;float之后，從之前的位置開始脫離文檔流，因此在下面。
2018-06-22
.center?{ ??/*margin:0?300px;*/ ??text-align:?center; ??background:?gray; ??position:?absolute; ??right:?300px; ??left:?300px; }將.center設為絕對定位，添加左右距離300px
原來的布局里左浮動脫離文檔流，中間塊會忽視左邊占用的位置，所以和左邊在一行，用margin撐開兩邊的間隔，但是中間還是塊級元素，且沒有脫離文檔流，會占用一行，右邊不會忽視中間塊占用的位置，所以換行。
2018-02-26
不好用文字表述.你理解理解.因為<div?class="left">zuo</div>和<div?class="right">you</div>是浮動,相當于三個元素垂直排列.但是<div?class="center">左右兩列固定，中間自適應</div>是文本流,應該環繞在元素1那邊.之所以出現你那樣的情況是因為你的css的center有外邊距導致的.取消margin:0?300px;外邊距,你會發現3還是在下邊,這是因為你是向右浮動.而文本流占據了1的所有的右側,交換1和3位置就好了,是因為浮動并排排列,一個向左,一個向右,然后文本流環繞到中間.
2018-02-09
把
?<div?class="center">左右兩列固定，中間自適應</div>
????????<div?class="right">you</div>
位置調換即可實現三欄布局，