在写网页的时候，很多时候都会用到浮动，在使用浮动的时候，会脱离文档流，并且子级浮动会导致父级的高度塌陷，在这个时候我们可以使用overflow：hidden来触发bfc，自动找回父级的高度。
bfc又叫做块级格式化上下文
在浮动的时候也会遇到行内元素的浮动，行内元素浮动后会自动转化为块级元素，可以设置宽高。
浮动文本类的标记，如果没有指定宽度，浮动后会自动折叠到最小宽度。
有的时候当你浮动后，会发现浮动对你的后面的元素造成了影响，这个时候可以书写clear：both来消除前面的浮动对自身的影响。
如果父级包含块没有足够的空间来容纳子级浮动元素，那么子级元素会自动换行，不会覆盖前一个元素。
下面来举个栗子：
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <style> | |
| .no{ | |
| width: 500px; | |
| height: 400px; | |
| background-color: gold; | |
| } | |
| .no1{ | |
| width: 250px; | |
| height: 400px; | |
| background-color: blue; | |
| float: left; | |
| } | |
| .no2{ | |
| width: 250px; | |
| height: 400px; | |
| background-color: blueviolet; | |
| float: right; | |
| } | |
| .nox{ | |
| width: 250px; | |
| height: 100px; | |
| background-color: aqua; | |
| } | |
| .noy{ | |
| width: 125px; | |
| height: 100px; | |
| background-color: cadetblue; | |
| float: right; | |
| } | |
| .now{ | |
| width: 125px; | |
| height: 50px; | |
| background-color: coral; | |
| } | |
| .no3{ | |
| width: 250px; | |
| height: 100px; | |
| background-color: #14ff39; | |
| } | |
| .no4{ | |
| width: 250px; | |
| height: 100px; | |
| background-color: #ff1813; | |
| } | |
| .nol{ | |
| width: 125px; | |
| height: 100px; | |
| background-color: #9f0ca0; | |
| float: right; | |
| } | |
| .noi{ | |
| width: 125px; | |
| height: 50px; | |
| background-color: #33d1ff; | |
| } | |
| .no5{ | |
| width: 250px; | |
| height: 100px; | |
| background-color: #fdff2f; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="no"> | |
| <div class="no1"></div> | |
| <div class="no2"> | |
| <div class="nox"> | |
| <div class="noy"> | |
| <div class="now"></div> | |
| </div> | |
| </div> | |
| <div class="no3"></div> | |
| <div class="no4"> | |
| <div class="nol"> | |
| <div class="noi"></div> | |
| </div> | |
| </div> | |
| <div class="no5"></div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
当然，也许有更好的写法，不过我还没学会。。。。。。。哈哈哈哈哈哈
浙公网安备 33010602011771号