浮动

把一个元素“浮动”起来,这会改变该元素本身和在正常布局流中跟随它的其他元素的行为,这一元素会浮动到左侧或右侧,并且从正常布局流中移除,这时候其他的周围内容就会在这个被设置成浮动的元素周围环绕,浮动的元素会在一行内显示并且元素顶部对齐,具有行内块元素的特性

float属性有四个可能的值

left——将元素浮动到左侧

right——将元素浮动到右侧

none——默认值,不浮动

inherit——继承父元素的浮动属性

把一个

元素浮动到左侧,设置长宽,并给它一个30px的右侧的间距

Simple float example

Float

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.

    Duis felis orci, pulvinar id metus ut, rutrum luctus orci.

    Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet.

    Sed auctor cursus massa at porta. Integer ligula ipsum,

    tristique sit amet orci vel, viverra egestas ligula.

    Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.

    Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.

显示出:


清除浮动

为了清除浮动元素脱离标准流造成的影响,需要用一定的方法去清除浮动

额外标签法

也叫隔墙法,额外标签是在最后一个浮动元素的末尾加上一个空的块级标签,div、br等等,然后在css中修改其样式clear:both

缺点是会添加很多无意义的标签,结构化较差

父级添加overflow属性

给需要清除浮动的元素的父级元素添加overflow属性,将其属性值设置为hidden、auto或者scroll,最常用的设置为hidden

:after伪元素法

可以看作是额外标签法的升级版,给父级元素添加(父级元素类名为clearfix时)格式

你可能感兴趣的:(浮动)