浮动元素的清除
浮动元素的清除 : 每个浮动元素之间都是会相互影响的,从而要清除浮动元素。方法有: 1、没有高度的父亲盒子能被儿子撑出高度,但儿子成为浮动元素后,父亲盒子将不会有高度。所以给父亲元素一个高度(足够高),就能清除浮动了。 2、clear:both :给后一个选择器增加 clear:both属性 ,但此时margin(外边距)失效了(其实不是真正的失效,原因还是父盒子没有高度,当达到一定高度,会有margin) 3、隔墙法:在两个盒子之间建一堵墙(<div></div>) .cl{ clear: both; margin: 10px; /*margin没有作用*/ } .h16{ height: 10px; } </style> </head> <body> <div> <p class="p1"></p> </div> <div class="cl h16"> <!-- 隔墙 ,一个标签可同时携带多个各类 --> </div> <div> <p class="p2"></p> </div> </body> </html> 4、内墙法:直接放在盒子里,并且墙所在的盒子会有高,墙可有背景颜色。 <div> <p></p> <p></p> <div class="cl"></div> </div> 以上可以当作一个公式用,当两个 P都浮动时,div不能被撑出高 ,在家里修一堵墙