day36 浮动

浮动

display

block：块元素

inline: 行内元素

inline-block：是块元素但是可以行内内联

none：消失

 1 <head>
 2      <meta charset="UTF-8">
 3      <title>Title</title>
 4      <style>
 5          /* block:块元素
 6          inline :行内元素
 7          inline - block： 是块元素但是可以行内内联
 8          none：消失*/
 9          div{
10              width: 100px;
11              height: 100px;
12              border: 1px solid red;
13              display: inline-block;
14          }
15          span{
16              width: 100px;
17              height: 100px;
18              border: 1px solid skyblue;
19              display: inline;
20          }
21      </style>
22  </head>
23  <body>
24  
25  
26  <div>div块元素</div>
27  <span>span行内元素</span>
28  
29  </body>

float

添加三个div标签，插入三张图片

 1 <body>
 2  
 3  
 4  <div id="father">
 5      <div class="la1"><img src="image/a.png" alt=""></div>
 6      <div class="la2"><img src="image/b.jpg" alt=""></div>
 7      <div class="la3"><img src="image/2.PNG" alt=""></div>
 8      <div class="la4">
 9          浮动的盒子
10      </div>
11  
12  
13  </div>
14  
15  
16  </body>

使用float对浮动方向进行更改

首先设定一个边框，再进行更改

 1 div{
 2      margin: 10px;
 3      padding: 5px;
 4  }
 5  #father{
 6      border: 1px #000 solid;
 7  }
 8  .la1{
 9      border: 1px #f00 dashed;
10      display: inline-block;
11      float: right;
12  }
13  .la2{
14      border: 1px #666 dashed;
15      display: inline-block;
16      float: right;
17  }
18  .la3{
19      border: 1px #00f dashed;
20      display: inline-block;
21      float: right;
22  }
23  .la4{
24      border: 1px #060 dashed;
25      display: inline-block;
26      line-height: 23px;
27      font-size: 12px;
28      clear: both;
29      float: right;
30  }

解决边框塌陷问题

 <div id="father">
     <div class="la1"><img src="image/a.png" alt=""></div>
     <div class="la2"><img src="image/b.jpg" alt=""></div>
     <div class="la3"><img src="image/2.PNG" alt=""></div>
     <div class="la4">
         浮动的盒子
     </div>

增加父级元素高度

 /*第一种方法：*/
 /*height: 800px;*/

增加一个空的div标签清除浮动

<!--    第二种方法：-->
 <!--<div class="float"></div>-->
 /*第二种方法：*/
 .float{
     clear: both;
     margin: 0;
     padding: 0;
 }

在父级元素中增加overflow

 /*第三种方法*/
 /*overflow: hidden;*/

在父类添加一个伪类

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

总结

 1.增加父级元素的高度
    简单 但是元素有了固定的高度，会被限制
 2.增加一个空的div标签清除浮动
     简单 但是增加一个空的div标签
 3.在父级元素中增加一个overflow：hidden属性
     简单 但是会有下拉的一些场景
 4. 在父类添加一个伪类:避免空div标签
     after（推荐）写法稍微复杂，没有副作用
 
 
 dispaly和float
 display：方向不可以控制
 float：浮动起来的时候会脱离标准文档流，会出现边框塌陷问题