                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /CSS深入理解之float浮動

假設(shè)高度已知，三欄布局，中間自適應，左右兩欄固定寬度300px，為什么我的右邊的那欄總是在下邊？

<!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-02-09

源自：CSS深入理解之float浮動 6-2

關(guān)注問題我要回答

1945

操作

收起

4 回答

蜜思_error
2018-11-08

因為div.center是個塊元素，當.div.right在設(shè)置浮動前位置在div.center后，且在它下面;float之后，從之前的位置開始脫離文檔流，因此在下面。

0 回復有任何疑惑可以回復我~

收起回答

朝朝暮暮兮
2018-06-22

.center?{
??/*margin:0?300px;*/
??text-align:?center;
??background:?gray;
??position:?absolute;
??right:?300px;
??left:?300px;
}

將.center設(shè)為絕對定位，添加左右距離300px

原來的布局里左浮動脫離文檔流，中間塊會忽視左邊占用的位置，所以和左邊在一行，用margin撐開兩邊的間隔，但是中間還是塊級元素，且沒有脫離文檔流，會占用一行，右邊不會忽視中間塊占用的位置，所以換行。

0 回復有任何疑惑可以回復我~

收起回答

慕田峪1218906
2018-02-26

不好用文字表述.你理解理解.因為<div?class="left">zuo</div>和<div?class="right">you</div>是浮動,相當于三個元素垂直排列.但是<div?class="center">左右兩列固定，中間自適應</div>是文本流,應該環(huán)繞在元素1那邊.之所以出現(xiàn)你那樣的情況是因為你的css的center有外邊距導致的.取消margin:0?300px;外邊距,你會發(fā)現(xiàn)3還是在下邊,這是因為你是向右浮動.而文本流占據(jù)了1的所有的右側(cè),交換1和3位置就好了,是因為浮動并排排列,一個向左,一個向右,然后文本流環(huán)繞到中間.

0 回復有任何疑惑可以回復我~

收起回答

#1

風到這里就是粘提問者

懂了，謝謝

2018-03-08 回復有任何疑惑可以回復我~

#2

慕田峪1218906 回復風到這里就是粘提問者

記得采納偶

2018-03-08 回復有任何疑惑可以回復我~