隨筆記一下 一個浮動的元素 如果沒有設置寬高 將會自動收縮為文字的寬高 脫標 貼邊 字圍 收縮
浮動有開始 就要有清除
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> li { float: left; width: 100px; height: 40px; background-color: gold; } </style> </head> <body> <div> <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> <li>HTML5</li> <li>OC</li> </ul> </div> <div> <ul> <li>swift</li> <li>java</li> <li>PHP</li> </ul> </div> </body> </html>
效果
可以看到div作為一個塊級元素 竟然沒有兩行顯示 第二個div中的li去貼第一個div的邊了
可以看到浮動和浮動之間還是有關系的（第二個div中的li去貼第一個div的邊了）
原因就是div沒有設置高度 不能給自己浮動的‘孩子們’一個容器
所以一個元素要浮動 那么他的父親一定要有高度.
那么可以知道，清除浮動的第一個方法就是 盒子有高度(可以清除浮動與浮動之間的影響) 即給浮動的元素的祖先加高度
只要浮動在一個有高度的盒子中，那么這個浮動就不會影響后面的浮動元素
網頁制作中，高度height很少出現,因為能被內容撐高!
清除浮動方法二
clear both 分為 clear:left clear:right
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> li { float: left; width: 100px; height: 40px; background-color: gold; list-style: none; } .box1 { clear: both; } </style> </head> <body> <div> <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> <li>HTML5</li> <li>OC</li> </ul> </div> <div class="box1"> <ul> <li>swift</li> <li>java</li> <li>PHP</li> </ul> </div> </body> </html>
效果
可以看到清除了浮動（兩個浮動之間的影響被清除了）
但是這個方法有一個致命的缺陷 margin在視覺上失效了
清除浮動方法三
隔牆法(外牆)
也是使用clear both 但是位置有變化
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css">
* {
margin:0px;
padding:0px;
}
li { float: left; width: 100px; height: 40px; background-color: gold; list-style: none; text-align: center; } .cl { clear: both; } /* .h { height: 0px; } */ </style> </head> <body> <div class="box1"> <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> <li>HTML5</li> <li>OC</li> </ul> </div> <div class="cl h"></div> <div class="box2"> <ul> <li>swift</li> <li>java</li> <li>PHP</li> </ul> </div> </body> </html>
注意clear both的位置，.h可以控制間距
內牆法
<style type="text/css"> * { margin: 0px; padding: 0px; } li { float: left; width: 100px; height: 40px; background-color: gold; list-style: none; text-align: center; } .cl { clear: both; } .h { height: 10px; } </style> <body> <div class="box1"> <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> <li>HTML5</li> <li>OC</li> </ul> <div class="cl h"></div> </div> <div class="box2"> <ul> <li>swift</li> <li>java</li> <li>PHP</li> </ul> </div> </body>
一個父親是不能被浮動的兒子撐出高度的
內牆法比外牆法的好處是 可以撐出父親的高度
overflow:hidden
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } div.news { width: 500px; height: 300px; border: 1px solid blue; margin: 100px; } ul { list-style: none; } li { border-bottom: 1px dashed gray; /* 和加內牆的效果一樣 可取其中一種 */ overflow: hidden; } .news ul li span.title { float: left; } .news ul li span.date { float: left; margin-left: 35px; } /* .cl { clear: both; } .h { height: 5px; } */ </style> </head> <body> <div class="news"> <ul> <li> <span class="title">嘻嘻嘻嘻嘻嘻嘻</span> <span class="date">2019-07-06</span> <!-- <div class="cl h"></div> --> </li> <li> <span class="title">嘻嘻嘻嘻嘻嘻嘻</span> <span class="date">2019-07-06</span> <!-- <div class="cl h"></div> --> </li> <li> <span class="title">嘻嘻嘻嘻嘻嘻嘻</span> <span class="date">2019-07-06</span> </li> </ul> </div> </body> </html>
https://www.jianshu.com/p/7e04ed3f4bea
總結
1 浮動的元素只能被有高度的盒子關注，也就是說，如果盒子內部有浮動，那么這個盒子有高，那么浮動不會相互影響。但是工作中我們絕不護給所有的餓盒子加高度，因為麻煩，並且不能適應頁面的快速變化。
2.最簡單的清除盒子的方法 給盒子添加 clear both 表示盒子內部的元素不受其他盒子的影響 但是margin 會失效 兩個盒子之間會沒有間隙
3.隔牆法(外牆) 和 （內牆）
內牆法的有點 不僅可以清除浮動間的影響，並且能撐出所在盒子的高度
4. overflow：hidden 這個屬性的本意是將所有溢出盒子的內容隱藏掉，但是 我們發現這個東西可以用於浮動的清除，我們知道一個父親不能被浮動的兒子撐出高度，但是加了這個屬性，父親就會被浮動的兒子撐出高度。能讓margin生效