css float属性

css float属性

ID:37860668

大小:777.33 KB

页数:8页

时间:2019-06-01

css float属性_第1页
css float属性_第2页
css float属性_第3页
css float属性_第4页
css float属性_第5页
资源描述:

《css float属性》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、cssfloat属性页面布局方式页面布局方式,主要包含:文档流、浮动层、float属性。文档流HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块(块级元素)换行。浮动层浮动层:给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框。而此浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去:块级元素直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素。内联元素:有空隙就插入。float属性介绍①left:元素向左浮动。②r

2、ight:元素向右浮动。③none:默认值。④inherit:从父元素继承float属性。示例1/82.3-float属性

3、/css">#a{background-color:Red;height:50px;width:100px;}#b{background-color:Yellow;height:50px;width:200px;}#c{background-color:Blue;height:50px;width:300px;}#d{background-color:Gray;height:50px;width:400px;}div-a

4、=b>div-b

div-c
div-d
2/82.float:left说明:元素向左浮动。代码变更input2添加:float:leftdiv-b添

5、加:float:leftdiv-d添加:float:left变更后视图①浏览器的宽度“不够长”时②浏览器的宽度"够长"时3/8结论下一个紧邻元素分类(不含f当前元素分类(float:left)结论loat)块级元素(b)b会填充a遗留下来的空间,a会和b发生重叠,a的图层在上面。块级元素(a)内联元素(b)b会紧跟在a的后面。并根据自身内联元素的特点,是否换行。块级元素(b)b不会跟随a的移动。内联元素(a)内联元素(b)b会紧跟在a的后面。并根据自身内联元素的特点,是否换行。3.float:right

6、说明:元素向右浮动。代码变更input2元素:添加float:rightdiv-b添加:float:rightdiv-d添加:float:right变更后视图①浏览器的宽度“不够长”时②浏览器的宽度"够长"时4/8结论当前元素分类(float:right)下一个紧邻元素分类(不包含float)结论b会填充a遗留下来的空间,若a会和b发生重叠(父容器块级元素(b)宽度减少),a的图层在上面。块级元素(a)内联元素(b)b会填充a遗留下来的空间。块级元素(b)b不会跟随a的移动。内联元素(a)内联元素(b)

7、b会填充a遗留下来的空间。4.相邻元素含有float属性因内联元素的特性,最好别把内联元素与块级元素相邻使用float属性。下面都以块级元素为例:默认视图:5/84.1float:left给这三个div都添加float:left视图①浏览器的宽度"足够长"②浏览器的宽度"不够长"结论Ⅰ相邻的浮动元素,left属性最前面的元素,排在最左面。Ⅱ成为浮动元素后,在浮动层拥有内联元素的"特性",当多个浮动元素1排容不下时,就换行。4.2float:right给这三个div都添加float:right视图①浏览器

8、的宽度"足够长"6/8②浏览器的宽度"不够长"结论Ⅰ相邻的浮动元素,right属性最前面的元素,排在最右面。Ⅱ成为浮动元素后,在浮动层拥有内联元素的"特性",当多个浮动元素1排容不下时,就换行。4.3height高度不等的块级元素把div-a的height值设为大于div-b,三个div都添加float:left后:视图①浏览器的宽度"足够长"②浏览器宽度缩小时7/8③浏览器宽度进一步缩小时结论Ⅰheight不相等的div浮动元素排序时,照

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。