CSS浮动及解决父级边框塌陷

CSS浮动

CSS (Cascading Style Sheet )

1、浮动的介绍

1.1 块元素

h1-h6
p、div、列表... ...

1.2 行元素

span、a、img、strong... ...

行元素可以包含在块元素中，反之则不行。

1.3 块元素和行元素互相转换

	div{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display: inline;
    }
    span{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display: inline-block;
    }

2、浮动

2.1 浮动的语法

span{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display: inline-block;
      float:left;
    }

float：方向；

2.2 解决框架塌陷问题

清楚塌陷

clear:none;
clear:both;
clear:left;
clear:right;

1、 浮动元素后面增加空div------简单代码中尽量避免空div

<div class="div1"></div>

.div1{
    clear:both;
}

2、 设置元父元素的高度------简单，元素假设有固定的高度，就会被限制

3、 overflow------简单，下拉的一些场景避免使用

4、 父类添加一个伪类：after（推荐）------没有副作用，写法复杂一点，但是推荐

#father:after{
    content='';
    display:block;
    clear:both;
}

3、对比

3.1 display

display:inline;
display:block;
display:inline-block;

方向不可控制

3.2 float

float:left;float:right;float:hidden;float:scroll;

浮动起来的话会脱离标准文档流，所以要解决父级边框太闲

以上是css中盒子模型，蟹蟹支持~~~

推荐个up主，超厉害

狂神说java