浮动
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：浮动起来的时候会脱离标准文档流，会出现边框塌陷问题
标签：浮动,元素,float,day30,inline,div,display,block From： https://www.cnblogs.com/GUGUZIZI/p/16916753.html