码迷,mamicode.com
首页 > 其他好文 > 详细

元素的浮动和清空浮动

时间:2017-06-22 13:25:44      阅读:94      评论:0      收藏:0      [点我收藏+]

标签:div   hidden   分享   ima   标记   alt   .com   com   滚动条   

页面的默认样式是从上到下排序的。漂浮可以让页面从左到右排序。

(1)float(浮动)

语法:

选择器{float:属性值;}

技术分享

float有三个属性left,right,none(默认)。

float等于left元素就向左浮动,float等于right元素就向右浮动,float等于none元素不浮动(默认)。

注:

如果盒子内的元素都浮动在盒子没有高度的情况下盒子就会变成一条线。

解决办法:(1).给盒子设置高度。(2).清空浮动。

2.清空浮动

(1).空标记清空浮动

clear等于left清空左面的浮动,clear等于right清空右面的浮动,clear等于both左右的清空浮动。

语法:

<div style="clear:both"></div>

技术分享

(2).overflow

在父元素里设置overflow:hidden就能清空对父元素的影响了。

overflow等于visible(默认)内容不会被剪掉

overflow等于hidden多余的内容就会被剪掉(不会在框之外)

overflow等于auto会产生滚动条(上下滚动条)

overflow等于scroll会产生滚动条(上下滚动条和左右滚动条)

(3).after伪对象

语法:

父类的选择器:after{ height:0;content:"";}

技术分享

 

元素的浮动和清空浮动

标签:div   hidden   分享   ima   标记   alt   .com   com   滚动条   

原文地址:http://www.cnblogs.com/zhang1999/p/7064187.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!