CSS--浮动布局_盒子的border设置不上加上浮动就好了-优快云博客

本文链接：https://blog.youkuaiyun.com/clhdtzhh/article/details/123232144

本文介绍了浮动元素布局中常见的问题及其解决方案。当两个浮动元素的宽度设为50%并加上border时，会导致盒子溢出，通过设置`box-sizing:border-box`可以解决这个问题。浮动元素会覆盖后续的块级元素，但不会影响文字。使用`clear:both`或添加`.clearfix`类来清除浮动，确保后续元素的正常显示。示例展示了如何创建一个两列布局的浮动布局结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、两个浮动元素宽度都设为50%，如果加了border就会撑开盒子，装不下，就会换行，解决:box-sizing: border-box。注意：这个属性，只会padding有效果，就是说padding撑开它可以维持原盒子大小（实际上是压缩content吧），但是margin撑开设置border-box也没用

2、浮动流盒子后面的正常流如果是文字不会被遮住，如果是块，浮动元素会盖住，

3、清除浮动：clear:both 这种情况有个问题，浮动后面的正常流块设置margin无效，解决办法： <div class="clearfix"></div> + 。clear { clear:both },隔墙标签法

4、浮动布局示例

HTML

<div class="main">
        <section>
            <h1>first column</h1>
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem
                placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet
                nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
                tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex
                malesuada
                et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
                sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus
                varius
                commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
        </section>

        <section>
            <h1>second column</h1>
            <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est,
                posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam
                lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed
                lobortis
                finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in
                interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        </section>
        <div class="clearfix"></div>
        <footer>©2016 your imagination. This isn't really copyright, this is a mockery of the very concept. Use as you
            wish.</footer>
    </div>

CSS

html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        .main {
            margin: 0 auto;
            width: 90%;
        }
        section:first-child {
            float: left;
            width: 50%;
            padding-right: 10px;
            box-sizing: border-box;
        }
        section:nth-child(2) {
            float: right;
            width: 50%;
            padding-right: 10px;
            box-sizing: border-box;
        }
        footer {
            /* clear: both; */
            margin-top: 30px;
        }
        .clearfix {
            clear: both;
        }