专栏首页Tuzei的笔记[前端][css]float left布局换行不正常问题

[前端][css]float left布局换行不正常问题

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

image.png

结果出现了这样的情况

image.png

页面的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到左边,然后碰上了第三块,然后就停下了。第二行后面的就被挤到第三行了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [前端][CSS] 纯css实现纵向滚动固定表头与横向内容滚动

    最基础的思路就是表头和内容是用两个表格来显示(图来自https://zhuanlan.zhihu.com/p/33280304),关于怎么保存表头和内容列宽一致...

    Tuzei
  • [前端][CSS]用ps的方式理解层叠上下文

    之前看了大佬的对层叠上下文的解释 https://www.zhangxinxu.com/wordpress/2016/01/understand-css-st...

    Tuzei
  • 手把手教你设置局域网访问虚拟机内服务器

    如果我们在虚拟机内搭建好服务器后,希望可以在局域网内的设备上都能访问到这个虚拟服务器,就可以参照以下步骤来操作。其中包括了很多遇到的坑。先说说我的环境是

    Tuzei
  • H5页面实现原理分析

    <!doctype html> <html> <head> <style> html{overflow:hidden;} body{margin:0;} .w...

    用户1730674
  • flex 布局

    CSS3 为我们提供了一种可伸缩的灵活的 web 页面布局方式 flexbox 布局,它具有很强大的功能,可以很轻松实现很多复杂布局。可以简便、完整、响应式地实...

    柳醉梦声
  • selenium-java web自动化测试工具

    本篇文章由来,这两天整理了下自己经常使用而且很熟练的项目,今天突然想起漏了一个,补上了,但想到还没对应的博客,那就写一个简单的

    肖哥哥
  • 用CSS画小猪佩奇

    腾讯NEXT学位
  • HTML5选择器

    czjwarrior
  • 一起学爬虫——使用xpath库爬取猫眼电

    之前分享了一篇使用requests库爬取豆瓣电影250的文章,今天继续分享使用xpath爬取猫眼电影热播口碑榜

    py3study
  • HTML&CSS书写规范

    第一部分:HTML书写规范: 1.1 HTML整体结构: 1.1.1:HTML基础设施: 文档以"<!DOCTYPE...>"首行顶格开始,推荐使用"<!DOC...

    用户1149564

扫码关注云+社区

领取腾讯云代金券