一：浮动布局
what | why：让块级（block）标签在父级的宽度限制下同行显示，一行显示不下，自动换行 注：要到达一行显示个数固定，一定要固定父级的宽度 语法： 子级 { float ：left | right } 问题：子级不再撑开父级高度（不完全脱离文档流） 脱离文档流：=>层次结构会上移，覆盖有位置重叠且没脱离文档流的标签 不完全：浮动布局后，可以重新让子级撑开父级的高度 清浮动：让不完全脱离文档流的子级重新撑开父级的高度，这种做法就叫清浮动 语法： 父级：after{ content:""; display:block; clear:both; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动布局</title> <link rel="stylesheet" href="css/reset.css"> <style> .div { width: 200px; height: 200px; background-color: yellow; margin-right: 10px; float: right; } </style> <style> .ul1 { background-color: pink; width: 600px; margin: 0 auto; } .ul1 li { width: 200px; height: 60px; } .ul1 li:nth-child(2n) { background-color: orange; } .ul1 li:nth-child(2n - 1) { background-color: red; } /*谁们需要同行排列, 谁们就用浮动布局处理*/ .ul1 li { float: left; /*float: right;*/ } /*谁的高度没有被浮动子级撑开, 谁来清浮动*/ .ul1:after { content: ""; display: block; clear: both; } .bro { width: 50px; height: 50px; background-color: black; } </style> </head> <body> <!--<div class="div"></div>--> <ul class="ul1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <div class="bro"></div> <!--了解--> <!--:after | :before 伪类 -> 内容--> <style> .box:after { /*display: block;*/ content: "000"; } .box:before { /*display: block;*/ content: "***"; } </style> <div class="box">123</div> </body> </html>