清除浮动方法介绍

在设计网页样式时我们所最需要的就是清除浮动,这样页面才可以按照我们所想去实现一些样式。标准文档流是做不出网页的。下面小编具体介绍一些清除浮动方法。

首先我们要明确,浮动的清除不是指的是把浮动去掉而是关住浮动,使得浮动与浮动之间相互不影响。

1.给盒子加高(不适用)

浮动在一个有高度的盒子中就不会影响后面的浮动元素,给祖先元素加高是一种方法。

2.clear:both;(该方法会使margin失效)

在祖先盒子加入clear:both;属性

我们这样理解这种方法clear:both;就是使得该盒子消除了两边浮动的影响。但这样的话该盒子就会margin属性失效。所以同样不适用。

3.隔墙法(该方法运用浮动元素盒子同样没高)

运用实例:就是在两个浮动元素中加上一个盒子将该盒子加上clear:both;属性

同样在此时我们如果需要之前两个盒子间有间隙的话直接给我们所添加的工具盒子附上高,这样通俗来讲就是在两个浮动盒子中加了一个工具盒子来支撑他们两个,同时消除浮动影响。

这边实例简介一下

1<div class="box1">
2		<ul>
3			<li>HTML</li>
4			<li>CSS</li>
5			<li>JS</li>
6			<li>HTML5</li>
7			<li>设计模式</li>
8		</ul>
9	</div>
10	
11	<div class="cl h16"></div>
12
13	<div class="box2">
14		<ul>
15			<li>学习方法</li>
16			<li>英语水平</li>
17			<li>面试技巧</li>
18		</ul>
	</div>


css中
1.cl{
2	clear: both;
3}
4.h16{
5	height: 16px;
}

4.内墙法(可以给浮动元素盒子添加上高而且高是由盒子内内容支撑不需要自己定义)

操作同外墙法一样但只是把所要加入的盒子加浮动元素盒子中,这种方法更加灵活,因为这样会使父盒子高度自己按内容定义。

5.overflow:hidden;

在父盒子中加入该属性,就会清除浮动影响,同样也会根据内容自定义高度。

3.4.5方法margin都生效

这边小编最后补充一点,如果没有浮动那么本身父盒子会被内容所填充高度,但是浮动后元素脱离了标准文档流不能对父亲盒子进行填充。

猜你喜欢

转载自blog.csdn.net/qq_40833779/article/details/81707966