第二節 float · html-css

>### float ~~~ 目的：為了讓元素并排顯示 ~~~ #### 1.子元素float，父元素的高度會坍塌 ![](https://box.kancloud.cn/55ba16b28efc5bcfc4c200f5e61b2a50_500x500.png) ![](https://box.kancloud.cn/b29da7867212e417c5bce2f117ebd8ac_465x455.png) #### 2.如何清除float (1)給下面的兄弟元素給clear:both; (2)給父級加overflow:hidden; ~~~ .parent{ width:200px; background: red; overflow: hidden; } .child{ width:50px; height:50px; background: blue; float: left; } ~~~ ~~~ <style> /* 如何讓下面元素不受上面浮動元素的影響 1.clear:both; 2.給float元素父元素設置overflow:hidden */ .parent>div { width: 100px; height: 100px; float: left; } .one { background: red; } .two { background: blue; } .three { background: pink; } .four { width: 200px; height: 200px; background: gray; /* 清除float clear: both; */ } .parent{ overflow: hidden; } </style> </head> <body>  <div class="parent"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> <p class="four"></p> </body> ~~~ demo實現導航 ~~~ <style> *{margin:0;padding:0} .nav{ overflow: hidden; line-height: 50px; background: pink; } a{ display: block; float: left; text-decoration: none; width: 100px; text-align: center; color: #fff; } a:hover{ color: green; border-bottom: 2px solid blue; } </style> </head> <body> <div class="nav"> <a href="#">手機</a> <a href="#">平板</a> <a href="#">電腦</a> </div> </body> </html> ~~~ ![](https://box.kancloud.cn/19ed517f397eb3cc1ae38d350dc93baf_354x56.png) 內聯塊也可以實現導航，但是有缺點，不推薦使用 ~~~ <style> *{margin:0;padding:0} .nav{ line-height: 50px; background: pink; } a{ display:inline; text-decoration: none; width: 100px; text-align: center; color: #fff; } a:hover{ color: green; border-bottom: 2px solid blue; } </style> </head> <body> <div class="nav"> <a href="#">手機</a> <a href="#">平板</a> <a href="#">電腦</a> </div> </body> ~~~