搜索

day30 浮动


发布时间: 2022-11-25 03:29:01    浏览次数:28 次

浮动

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:浮动起来的时候会脱离标准文档流,会出现边框塌陷问题

 

 
免责声明 day30 浮动,资源类别:文本, 浏览次数:28 次, 文件大小:-- , 由本站蜘蛛搜索收录2022-11-25 03:29:01。此页面由程序自动采集,只作交流和学习使用,本站不储存任何资源文件,如有侵权内容请联系我们举报删除, 感谢您对本站的支持。 原文链接:https://www.cnblogs.com/GUGUZIZI/p/16916753.html