浮动与清除

浮动与清除

浮动, 意思就是把元素从常规的文档流中拿出来.拿出来干什么? 一是可以实现传统出版物上那种文字围绕图片的效果, 二是可以让原来从上往下罗列(堆叠)的块级元素, 变成左右并列, 从而实现分栏布局.

浮动和清除是用来组织页面布局的一柄利剑,这柄利剑的剑刃就是float和clear属性.

浮动元素脱离常规文档流之后,原来紧跟在其后的元素就会在空间允许的情况下,向上提升到与浮动元素平起平坐.

查看效果

围住浮动元素的方法

浮动元素脱离了主流(文档刘),其父元素(组织上)看不到它了,因此逃出了包围圈.这种情况并非是(组织上)想要的,因此介绍如何围住浮动子元素的方法.

 

1 2 3 4 5

<section>     <img src="#">     <p>It's fun to float.</p> </section> <footer>Here is the footer.</footer>

为父元素添加 overflow:hidden

为已浮动的元素的父元素添加 overflow:hidden, 强制父元素包围浮动元素.

1 2 3 4 5 6 7 8 9 10 11

<style>         section {             border: 1px solid blue;             margin: 0 0 10px 0;             overflow: hidden;         }           img {             float: left;         } </style>

 

同时浮动父元素

“同 流合污” , 也让父元素浮动起来.浮动section之后,不管其他子元素是否浮动,它都会紧紧的包围(收缩包裹)它的所有子元素,因此需要设置width,让 section与视口同宽. 并且, 由于section浮动了,footer会努力往上挤到它的旁边去. 为了强制footer依然呆在section下面,要给footer清除浮动影响. 被清除的元素不会被提升到浮动元素的旁边.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<style>        section {            border: 1px solid blue;            margin: 0 0 10px 0;            /*overflow: hidden;*/            float: left;            width: 100%;        }          img {            float: left;        }          footer {            clear: left;            border: 1px solid red;        }    </style>

 

添加非浮动的清除元素

给父元素的最后添加一个非浮动的子元素,让后清除(不是删掉,而是clear)该子元素. 再次使用了伪元素. after会在元素内容后面而不是元素后面插入一个伪元素.

1	<section class = "clearfix">

 

1 2 3 4 5 6 7

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