一、 在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

版权声明：本文为coderatian原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/coderatian/p/14790788.html