JS之清除浮動

1、給浮動的元素的祖先元素加高度

沒有清除浮動:
清除浮動:
div{
	 		height: 50px;
	 		border: 1px solid #000;
	 	}

<body>
	<div>          //設置高度
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JS</li>
			<li>HTML5</li>
			<li>設計模式</li>
		</ul>
	</div>

	<div>        //設置高度
		<ul>
			<li>學習方法</li>
			<li>英語水平</li>
			<li>面試技巧</li>
		</ul>
	</div>
</body>

2、clear: both;


.box2{
	 		clear: both;
	 	}
<body>
	<div class="box1">
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JS</li>
			<li>HTML5</li>
			<li>設計模式</li>
		</ul>
	</div>

	<div class="box2">           //clear:both
		<ul>
			<li>學習方法</li>
			<li>英語水平</li>
			<li>面試技巧</li>
		</ul>
	</div>
</body>
問題:margin失效了,兩個div之間沒有任何間隙。

3、隔牆法


.cl{
			clear: both;
		}
		.h8{
			height: 8px;
			_font-size:0;
		}
<body>
	<div class="box1">
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JS</li>
			<li>HTML5</li>
			<li>設計模式</li>
		</ul>
	</div>
	
	<div class="cl h8"></div>         //隔牆法,第一個div沒有高度

	<div class="box2">
		<ul>
			<li>學習方法</li>
			<li>英語水平</li>
			<li>面試技巧</li>
		</ul>
	</div>
</body>

4、內牆法


<body>
	<div class="box1">
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JS</li>
			<li>HTML5</li>
			<li>設計模式</li>
		</ul>

		<div class="cl h16"></div>   //內牆法
	</div>

	<div class="box2">
		<ul>
			<li>學習方法</li>
			<li>英語水平</li>
			<li>面試技巧</li>
		</ul>
	</div>
</body>
div被撐出高度了;

5、overflow: hidden;


.box1{
			overflow: hidden;
			_zoom:1;
			margin-bottom: 10px;
		}
<body>
	<div class="box1">
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JS</li>
			<li>HTML5</li>
			<li>設計模式</li>
		</ul>
	</div>

	<div class="box2">
		<ul>
			<li>學習方法</li>
			<li>英語水平</li>
			<li>面試技巧</li>
		</ul>
	</div>
</body>
用途:

<div>
		<p class="p1"></p>
		<p class="p2"></p>
		<p class="p3"></p>
</div>
div{
		width: 400px;
		overflow: hidden;
		border: 10px solid black;
	}

一個父親不能被自己浮動的兒子,撐出高度。但是,只要給父親加上overflow:hidden; 那麼,父親就能被兒子撐出高了。這是一個偏方。

6、推薦使用

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;    /*IE6 7*/
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章