CSS学习笔记(一)-18.浮动特性
浮动特性:
1.浮动元素脱离标准流。
由于box是浮动的,所以飘起来了。而box2就占用了box原来的位置。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-13 21:16:05 5 * @LastEditors: invoker 6 * @LastEditTime: 2021-07-13 21:18:06 7 * @Description: 8 * @FilePath: \css\浮动2.html 9 --> 10 <!DOCTYPE html> 11 <html lang="en"> 12 13 <head> 14 <meta charset="UTF-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 16 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 17 <title>浮动2</title> 18 <style> 19 .box { 20 height: 200px; 21 width: 200px; 22 background-color: pink; 23 float: left; 24 } 25 26 .box2 { 27 height: 400px; 28 width: 300px; 29 background-color: blue; 30 color: red; 31 } 32 </style> 33 </head> 34 35 <body> 36 <div class="box">浮动的盒子</div> 37 <div class="box2">标准流的盒子</div> 38 </body> 39 40 </html>
2.浮动元素会一行内显示且元素顶部对齐。
3.浮动元素会具有行内块元素的特性。
如图所示:box2独占一行,box3行内块元素,另起一行展示。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-13 21:16:05 5 * @LastEditors: invoker 6 * @LastEditTime: 2021-07-13 21:28:01 7 * @Description: 8 * @FilePath: \css\浮动2.html 9 --> 10 <!DOCTYPE html> 11 <html lang="en"> 12 13 <head> 14 <meta charset="UTF-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 16 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 17 <title>浮动2</title> 18 <style> 19 .box { 20 height: 200px; 21 width: 200px; 22 background-color: pink; 23 float: left; 24 } 25 26 .box2 { 27 height: 400px; 28 width: 300px; 29 background-color: blue; 30 color: red; 31 /* float: left; */ 32 } 33 34 .box3 { 35 height: 400px; 36 width: 400px; 37 background-color: purple; 38 color: green; 39 float: left; 40 } 41 </style> 42 </head> 43 44 <body> 45 <div class="box">浮动的盒子</div> 46 <div class="box2">标准流的盒子</div> 47 <div class="box3">浮动的盒子3</div> 48 49 </body> 50 51 </html>
1.如果块级盒子没有设置宽度,默认和父级一样宽。但是变成浮动盒子后,他的大小根据内容来决定。
2.浮动的盒子中间没有缝隙,但是同一行多个行内块元素,则会有缝隙。
本文来自博客园,作者:kaer_invoker,转载请注明原文链接:https://www.cnblogs.com/invoker2021/p/15008543.html