学习内容：
1.float，可使div脱离其原来位置进行位移
（1）float:left 向左浮动；（2）float:right 向右浮动；
1 <html> 2 <head> 3 <style> 4 #d1 { 5 background-color: red; 6 width: 100px; 7 height: 100px; 8 float: left; /*浮动会脱离当前位置，不占用原来位置*/ 9 } 10 #d2 { 11 background-color: blue; 12 width: 100px; 13 height: 100px; 14 float: right; 15 } 16 </style> 17 </head> 18 19 <body> 20 <div id="d1">我是左</div> 21 <div id="d2">我是右</div> 22 </body>
2.clear
可对标签左右方向的float元素进行清除，避免元素之间相互叠加
1 <head> 2 <style> 3 #d1 { 4 background-color: red; 5 width: 100px; 6 height: 100px; 7 float: left; 8 } 9 #d2 { 10 background-color: blue; 11 width: 100px; 12 height: 100px; 13 float: right; 14 } 15 #d4 { 16 background-color: cornflowerblue; 17 height: 900px; 18 width: 100%; 19 clear: both;/*若不清除浮动，会和D1 D2重合*/ 20 } 21 </style> 22 </head> 23 <body> 24 <div id="d1">我是左</div> 25 <div id="d2">我是右</div> 26 <div id="d4"></div> 27 </body> 28
3.overflow，对溢出边框的元素怎么处理
（1）hidden：隐藏，可以对X Y轴方向进行单独设着 overflow-x overflow-y
（2）scroll：不论有没有溢出，都会产生一个滚动条
（3）auto：溢出时产生一个滚动条，否则不产生
1 <head> 2 <style> 3 #of { 4 width: 130px; 5 height: 50px; 6 border: 1px solid red; 7 position: relative; 8 left: 500px; 9 overflow: hidden; 10 /*隐藏溢出部分，也可以单独设置x，y方向隐藏 scroll，卷动，强制加滚 动条 11 auto 溢出后自动加滚动条 12 word-break: 全部折行，无视标点和回车等换行符； 13 word-wrap: 可以视标点符号等换行，会产生空白*/ 14 </style> 15 </head> 16 <body> 17 <div id="of"> 18 abcdefghijklmn, 19 akjafjfjfjafwdaddadd,q 20 wsdssa,qqwew 21 eq,dadwdadadwww,adsdasda. 22 </div> 23 </body>
2018.02.06
