为了账号安全,请及时绑定邮箱和手机立即绑定

文档流对浮动的影响

标签:
Html/CSS

什么是文档流?

说白了就是一个“默认”状态。文档流指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素。

现在有一个左中右布局

html

<div class="wrap">
        <div class="float-left"></div>
        <div class="center"></div>
        <div class="float-right"></div>
    </div>

css

.float-left{            width: 200px;            float: left;            background-color: yellow;            height: 300px;
        }        .float-right{            width: 200px;            float: right;            background-color: red;            height: 300px;
        }        .center{            margin: 0 200px;            background-color: blue;            height: 300px;
        }

效果图


webp

image.png


注释
中间的块级元素会默认占了整行的位置,即使给他一个宽度,他还是会占了整行的位置,块级元素就是这么霸道。
从效果看,为什么第一个不会被中间的块级元素挤下去或把中间的挤下去,这是因为左右两个是浮动元素,块级元素会无视浮动元素,然而浮动元素却不能无视块级元素,所以右边的会被挤下去


如果我们将中间的和右边的换一下位置呢?

html

<div class="wrap">
        <div class="float-left"></div>
        <div class="float-right"></div>
        <div class="center"></div>
    </div>

效果图

webp

image.png


显然中间的蓝块无视了前面两个浮动元素

如果我们将蓝块变成行内元素或设置为display:inline-block呢?

html

<div class="wrap">
        <div class="float-left"></div>
        <div class="center"></div>
        <div class="float-right"></div>
    </div>

css

.float-left{            width: 200px;            float: left;            background-color: yellow;            height: 300px;
        }        .float-right{            width: 200px;            float: right;            background-color: red;            height: 300px;
        }        .center{            margin: 0 200px;            background-color: blue;            height: 300px;            width: 300px;            display: inline-block;
        }

效果图

webp

image.png


现在中间块的位置没有占满整行,所以他不会占浮动元素的位置,这时整行完全够他们用,如果将蓝块的宽度设为整行不能同时容纳他们三会怎样呢?
我们发现他们会上中下排布,这时可以将带行内属性的元素视同浮动元素对待



作者:雨未浓
链接:https://www.jianshu.com/p/a359988859a5


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消