最近遇到一个页面布局上的问题,后来模拟了一下还原了下出现的原因。本来大概想实现的布局大概是这样的

结果出现了这样的情况

页面的html是这样的 

<div class="block">
        <div></div>
    </div>
    <div class="block">
        <div></div>
    </div>
    <div class="block">
        <div></div>
    </div>
    <div class="block" >
        <div id="special"></div>
    </div>
    <div class="block">
        <div></div>
    </div>
    <div class="block">
        <div></div>
    </div>

css

.block {

            width: 25%;
            padding: 10px;
            float: left;
            box-sizing: border-box;

        }
        .block div {
            background-color: pink;
            width: 100%;
            height: 280px;
        }
        #special {
            height: 280px;
            background-color: green;
        }

这样的代码布局如最开始的图是正常的，但当special的height小于280px时就会变得不正常。

然后去看了下float的定义：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动的边框为止。

也就是本来第二行的想float到左边，然后碰上了第三块，然后就停下了。第二行后面的就被挤到第三行了。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS子元素宽度限制超过父元素怎样做

  这篇文章主要介绍了纯CSS让子元素突破父元素的宽度限制,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• CSS中如何实现立体导航栏，代码是什么

  这篇文章主要介绍了使用CSS制作立体导航栏的相关资料,需要的朋友可以参考下

• HTML里section与div标签如何使用，不同在哪

  本篇文章主要的想大家介绍了关于HTML5 section标签和div标签的区别，section和div的用法看似相近，实则差的也不是太多，有些地方可以相互转换都行，但有些地方只能用section或者只能用div，不能转换的，好了，接下来就让我们一起看文章吧

• CSS实现背景图铺满屏幕的方法是什么？

  这篇文章给大家分享的是CSS实现背景图铺满屏幕的方法。背景图铺满屏幕是比较常见的需求，但是有一些新手朋友可能对于如何实现这个效果不是很清楚，因此分享给大家做个参考，文中的示例代码介绍得很详细，实现代码如下，接下来就跟随小编一起了解看看吧。

• CSS高级技巧都有哪些，怎样应用的

  本篇文章带你玩转CSS，分享一些高级CSS技巧，快来看看你是否都会呀！