学习内容：
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,q20 ????????wsdssa,qqwew 21 ????????eq,dadwdadadwww,adsdasda.22 </div>23 </body>2018.02.06
CSS第三课
原文地址：https://www.cnblogs.com/whwjava/p/8421671.html