CSS专题之浮动

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

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

1 问题描述 

若想实现如下所示布局&＃xff0c;该如何做&＃xff1f;

HTML结构大致如下(section1高200px,宽40%,section2高100px&＃xff0c;宽50%)&＃xff1a;

头部

步骤1&＃xff1a;设置section1左浮动,大致出现下图&＃xff1a;

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

步骤2&＃xff1a;清楚浮动

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

}

.clearfix { *zoom:1; }

给wrapper添加clearfix类&＃xff0c;得到如下完成效果

2 问题注意&＃xff1a;

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

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

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

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