浮动元素的特点
float元素的特点:浮动元素在一行显示!
设置属性值为left时,浮动元素会依次从父级盒子的左侧向右排布,设置属性值为right时,浮动元素会依次从父级盒子的右侧向左排布
浮动元素自动具有块级元素的属性
浮动元素脱离文档流
浮动元素内的子元素,不会继承浮动属性
浮动元素下面的元素不能识别浮动元素的高度和位置
float元素的代码
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>
