第07章 div布局

右侧导航 教程所有章 CSS div布局 本章大纲 第1节 CSS div布局 简介 第2节 CSS display属性 第3节 CSS div布局 多列 第4节 CSS 右浮动 float right 第5节 CSS div布局 嵌套 第6节 CSS div布局 ul与li实现菜单 第7节 CSS div布局 商品列表 第8节 CSS 定位 position 第9节 CSS position static定位 第10节 CSS position relative定位 第11节 CSS position absolute定位 第12节 CSS position fixed定位 第13节 CSS position 定位总结 第14节 CSS z-index 第15节 CSS 布局核心属性总结 下一章 第08章 div布局常见问题
❮上一节  CSS div布局 多列 下一节  CSS div布局 嵌套❯

CSS 右浮动 float right

当多个元素设置左浮动

各元素会从左往右依次排列，展示顺序与编码顺序一致。


当多个元素设置右浮动

第1个设置右浮的元素会在最右，第2个设置右浮的会在倒数第2，即展示顺序与编码顺序相反。

<body>

    <div>
        <div style="float: left;width: 80px;">左1</div>
        <div style="float: left;width: 80px;">左2</div>
        <div style="float: right;width: 80px;">右1</div>
        <div style="float: right;width: 80px;">右2</div>
        <div style="float: right;width: 80px;">右3</div>
        <div style="clear: both;"></div>
    </div>

    <div>
        第2行
    </div>
    
</body>

img


❮上一节  CSS div布局 多列 下一节  CSS div布局 嵌套❯