                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /CSS深入理解之float浮动

假设高度已知，三栏布局，中间自适应，左右两栏固定宽度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

关注问题我要回答

1867

操作

收起

4 回答

蜜思_error
2018-11-08

因为div.center是个块元素，当.div.right在设置浮动前位置在div.center后，且在它下面;float之后，从之前的位置开始脱离文档流，因此在下面。

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

收起回答

朝朝暮暮兮
2018-06-22

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

将.center设为绝对定位，添加左右距离300px

原来的布局里左浮动脱离文档流，中间块会忽视左边占用的位置，所以和左边在一行，用margin撑开两边的间隔，但是中间还是块级元素，且没有脱离文档流，会占用一行，右边不会忽视中间块占用的位置，所以换行。

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

收起回答

慕田峪1218906
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位置就好了,是因为浮动并排排列,一个向左,一个向右,然后文本流环绕到中间.

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

收起回答

风到这里就是粘提问者

懂了，谢谢

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

慕田峪1218906 回复风到这里就是粘提问者

记得采纳偶

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