一、 在div使用display:inline-block时，HTML代码中的回车换行键会被转化为一个空白符

如图

<style type="text/css">

        *{

            margin: 0;

            padding: 0;

            }

        div{

            width: 100px;

            height: 100px;

            border: 1px solid #0000FF;

            display: inline-block;

        }

        span{

            width: 100px;

            height: 100px;

            border: 1px solid #0000FF;

            display: inline-block;

        }

    </style>

    </head>

    <body>

        <div id="">

            div块元素

        </div>

        <span>

            span行内元素

        </span>

    </body>

在父辈里添加 font-size: 0px; 在div里添加font-size:14px就能取消缝隙

二、清除浮动

1、 clear:both   

图片文字浮动起来div就坍塌了，在代码中添加一个div加上clear:both;后清除浮动；优点: 方便简洁使用起来比较方便  缺点:  添加多余代码，不方便后期的维护

<style type="text/css">

            #father{

                border: 1px solid #0099CC;

            }

            #father img{

                float: left;

            }

            #father p{

                float: right;

            }

            .clear{

                clear:both

            }

        </style>

    </head>

    <body>

        <div id="father">

            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg" >

            <p>这是一段文字</p>

            <div class="clear">

            </div>

        </div>

2、在页面中添加伪类标签 :after                                                                                                                                                                                                                        这种方法是最好的不会在html中添加多余的div

#father:after{

                content: '';

                display: block;

                clear: both;

            }

3、在父级页面中添加 overfloat:hidden

面试 CSS篇清除浮动及display:inline-block的更多相关文章

  1. 【css】清除浮动的几种方式

    [css]清除浮动的几种方式   因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...

  2. HTML&CSS基础-清除浮动

    HTML&CSS基础-清除浮动 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看浮动效果 1>.HTML源代码 <!DOCTYPE html> &l ...

  3. 前端面试——css篇

    css盒子模型 在W3C模型中: 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-rig ...

  4. CSS float清除浮动

    解决高度塌陷的问题 – 清除浮动 CSS中有个讨论较多的话题就是如何清除浮动,清除浮动其实就一个目的,就是解决高度塌陷的问题.为什么会高度塌陷?什么时候会高度塌陷?塌陷原因是:元素含有浮动属性 – 破 ...

  5. 前端老司机常用的方法CSS如何清除浮动？清除浮动的几种方式

    在前端开发过程中,我们经常会使用到浮动(float),这个我们即爱又恨的属性.爱,是因为通过浮动,我们能很方便地进行布局:恨,是因为浮动之后遗留下来太多的问题需要解决.下面本篇文章给大家介绍CSS清除 ...

  6. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  7. 关于CSS中清除浮动的方法

    在使用CSS样式时会经常使用到浮动(float),这时如果没有清除浮动就会造成很多怪异的现象,因此对父级元素清除浮动是必须要做的,这样也是书写CSS的一个良好习惯. 目前常用的方法大致有三种. (1) ...

  8. div+css之清除浮动

    当元素有浮动属性时,会对其父元素或后面的元素产生影响,会出现一个布局错乱的现象,可以通过清除浮动的方法来解决浮动的影响. 浮动的清理(clear): 值:none:默认值.允许两边都可以有浮动对象:l ...

  9. CSS中清除浮动的作用以及如何清除浮动

    1.什么是浮动,浮动的作用 “浮动”从字面上来理解就是“悬浮移动.非固定”的意思.块级元素(div.table.span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观.这就 ...

随机推荐

  1. Tomcat详解系列(2) - 理解Tomcat架构设计

    Tomcat - 理解Tomcat架构设计 前文我们已经介绍了一个简单的Servlet容器是如何设计出来,我们就可以开始正式学习Tomcat了,在学习开始,我们有必要站在高点去看看Tomcat的架构设 ...

  2. 高仿京东到家APP引导页炫酷动画效果

    前言 京东到家APP的引导页做的可圈可点,插画+动效,简明生动地说明了APP最吸引用户的几个亮点(商品多,价格低,配送快...).本文主要分析拆解这些动画效果,并完成一个高仿Demo,完整的Demo代 ...

  3. PAT (Basic Level) Practice （中文）1070 结绳 (25 分) 凌宸1642

    PAT (Basic Level) Practice (中文)1070 结绳 (25 分) 凌宸1642 题目描述 给定一段一段的绳子,你需要把它们串成一条绳.每次串连的时候,是把两段绳子对折,再如下 ...

  4. [BFS]电子老鼠闯迷宫

    电子老鼠闯迷宫 Description 如下图12×12方格图,找出一条自入口(2,9)到出口(11,8)的最短路径. Input Output Sample Input 12 //迷宫大小 2 9 ...

  5. 五年了，你还在用Junit4吗？

    junit5 JUnit5在2017年就发布了,你还在用junit4吗? 什么是junit5 与以前的JUnit版本不同,JUnit 5由三个不同子项目的多个不同模块组成. JUnit 5 = JUn ...

  6. kafka-简介-02

    1.kafka怎么实现高可用? 2.kafka伸缩性,分区的作用? 3.名词术语 消息:Record.Kafka 是消息引擎嘛,这里的消息就是指 Kafka 处理的主要对象. 主题:Topic.主题是 ...

  7. Magicodes.IE.ASPNETCore之多样化接口使用

    1.安装包 Install-Package Magicodes.IE.AspNetCore 2.开始配置 在Startup.cs的Configure()方法中,在UseRouting()中间件之后,注 ...

  8. JDBC_03_反射机制注册驱动

    反射机制注册驱动 代码:以类加载的方式注册驱动,因为注册驱动的代码是一个静态代码块,所以用Class.forname()加载该类,静态代码块也会进行加载 import java.sql.*; publ ...

  9. 支持多线程的Redis6.0来了

    支持多线程的 Redis 6.0 版本于 2020-05-02 终于发布了,为什么 Redis 忽然要支持多线程?如何开启多线程?开启后性能提升效果如何?线程数量该如何设置?开启多线程后会不会有线程安 ...

  10. .NET6 平台系列4 .NET开源之路

    系列目录     [已更新最新开发文章,点击查看详细] .NET平台是微软于2000年推出的Windows操作系统的应用软件开发框架,发展至今形成巨大的技术栈,涉及多语言(支持C#.F#.VB.NET ...