浮動元素的特色

時間 2021-01-10

標籤 css html spa code htm blog 繼承 utf-8 文檔欄目 CSS 简体版

原文原文鏈接

float元素的特色:浮動元素在一行顯示!
設置屬性值爲left時,浮動元素會依次從父級盒子的左側向右排布,設置屬性值爲right時,浮動元素會依次從父級盒子的右側向左排布
浮動元素自動具備塊級元素的屬性
浮動元素脫離文檔流
浮動元素內的子元素,不會繼承浮動屬性
浮動元素下面的元素不能識別浮動元素的高度和位置css

float元素的代碼html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <style type="text/css">
 7 .conten1,.conten2,.box{
 8 width: 200px;
 9 height: 200px;
10 float: left;
11 }
12 .conten1{
13 background-color: #1974A1;
14 }
15 .conten2{
16 background-color: #333333
17 }
18 .box{
19 background-color: aqua;
20 }
21 .box1,.box2{
22 width: 50px;
23 height: 50px;
24 float: right;
25 }
26 .box1{
27 background-color: darksalmon;
28 }
29 .box2{
30 background-color: coral;
31 }
32 span{
33 width: 200px;
34 height: 50px;
35 background-color: chartreuse;
36 float: left;
37 }
38 /*
39 浮動元素的特色
40 1.在一行顯示
41 2.浮動元索會脫離文檔流致使下而沒有浮動的元索識別不了它的高度和位置就會往上跑佔領浮動元素的位置
42 3.元素都是float:left左浮動元素從左往右依次排列
43 元索都是float:right右浮動元索從右往左依次排列
44 4.父元素浮動子元素並不會繼承父元素的浮動若是想要子元素也在一行顯
45 咱們須要給子元系也加浮動的屬性
46 5.浮動屬性不能繼承
47 6.浮動元素自己具備塊元素的特色因此用了浮動就不須要再加 dispay: block了
48 7.全部的元素均可以用浮動屬性
49 */
50 </style>
51 </head>
52 <body>
53 <div class="conten1"></div>
54 <div class="conten2"></div>
55 <div class="box">
56 <div class="box1"></div>
57 <div class="box2"></div>
58 </div>
59 <span>行內元素</span>
60 </body>
61 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。