CSS专题之浮动

一提到浮动，可能大家都懂，但是你有没有一种感觉，在自己独立进行布局时，有时候总感觉哪里不对劲，又不知道到底是哪儿不对劲，其实很多时候就是浮动并没有完全搞清楚，希望这篇文章能助你理清浮动的知识。

基本知识就不多说了，以下用一个例子来说明浮动，搞懂这个就差不多了

1 问题描述 

若想实现如下所示布局，该如何做？

HTML结构大致如下(section1高200px,宽40%,section2高100px，宽50%)：

<span style="white-space:pre">	</span><header id="header" class="">
		头部
	</header><!-- /header -->
	<div class="wrapper ">
		<section class="section1 ">
			section1 float:left;
		</section>
		<section class="section2 ">
			section2 float:left;
		</section>
	</div>
	<footer class="">
		尾部
	</footer>

步骤1：设置section1左浮动,大致出现下图：

仔细观察，section1虽然脱离文档流，但仍然占据了section2和尾部的位置，导致内容被挤压，注意此时设置section2的margin-left:40%可得到如下效果：

步骤2：清楚浮动

 .clearfix:after {content:""; display:block; height:0; visibility:hidden; clear:both; }

}

.clearfix { *zoom:1; }

给wrapper添加clearfix类，得到如下完成效果

2 问题注意：

1 父元素中有子元素时，且子元素都没设置浮动，则父元素高度由子元素高度叠加，若其中有子元素设置了浮动，则该元素脱离文档流，计算父元素高度时与它无关，但其内容还是占地方。

 

2 父元素中若有子元素设置了浮动，则没有设置浮动的子元素的margin-top会失效(浮动元素的不会失效)，这里的失效是指margin-top不针对父元素了，而是针对父元素的上一个兄弟元素（当没有兄弟元素时，针对浏览器），如下图左：child3设置了margin-top：20px,但针对的不是父元素。若实在需要child3下移，可通过将父元素设置padding-top:20px即可，如下右图

3 浮动布局时，最好将需要浮动的元素用一个父元素包起来。子元素设置浮动，父元素清除浮动。

有需要源码的可在下方留言哈~