css浮动及其危害和解决方法

css3

浏览数:248

2019-1-3

AD:资源代下载服务

html元素有三种类型:

①、块状元素: 如div ——– display:block
②、内联元素: 如span —— display:inline
③、内联块元素:如input —- display:inline-block

在标准流中,三种类型的元素呈现的方式不同
*display:block
元素会独占一行,多个block元素会各自新起一行
*inline 和 inline-block
元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行

如果想block元素像inline元素那些不会自动换行,可以用css的float属性(浮动)
left ——— 元素向左浮动。
right ——- 元素向右浮动。
none —— 默认值。元素不浮动,并会显示在其在文本中出现的位置。
inherit —- 规定应该从父元素继承 float 属性的值。

虽然浮动很方便,但是也带来了一定的负面影响

浮动主要造成了父元素高度塌陷,以至于父元素很多像背景颜色,边框等都不能正确的显示出来

我们先来看一下正常的浮动效果

<div class="parent">
    <div class="child child1"></div>
    <div class="child child2"></div>
</div>
.parent{
    width: 300px;
    border: 3px solid black;
    background-color: yellow;
}
.child{
    width: 50px;
    height: 50px;
}
.child1{
    background-color: red;
    float: left;
}
.child2{
    background-color: blue;
    float: right;
}

正常的浮动效果

正常的效果如上图所示:
我们可以看到父元素本来是设置的属性

background-color: yellow
border: 3px solid black

都没有显示出来,就是因为浮动造成的高度坍塌!

解决浮动的负面影响

解决后的效果图
图片描述

①、给父元素定义高度

.parent{
    height: 50px;
}

②、给父元素加上overflow:hidden

.parent{
     overflow: hidden;
}

③、给父元素加上overflow:auto

.parent{
     overflow: auto;
}

④、给父元素加上display: table

.parent{
     display: table;
}

⑤、在最后一个子元素上加一个div,使用clear:both

<div class="parent">
    <div class="child child1"></div>
    <div class="child child2"></div>
    <div style="clear:both;"></div>
</div>

⑥、父元素定义伪类:after

.parent:after{
    content:"";
    display:block;
    clear:both;
}

在实际开发中推荐使用第六种

原文地址:https://segmentfault.com/a/1190000017744819