码迷,mamicode.com
首页 > Web开发 > 详细

css中的浮动

时间:2020-06-29 13:49:07      阅读:53      评论:0      收藏:0      [点我收藏+]

标签:直接   浮动   宽度   默认   特点   能力   元素   oat   百分比   

浮动的作用

包围文本

横向排列(因为行块盒会空白折叠)

浮动的特点

修改float属性

left 左浮动 上左

right 右浮动 上右

默认为none

1.一个元素浮动以后,必定是块盒。

2.浮动元素的包含块,为父元素的内容盒。

盒子尺寸

1.宽度为auto时,适应内容宽度。常规流时,撑满内容盒。

2高度为auto时,与常规流一样,适应内容高度。

3.margin为auto时,四个方向都为0、常规流左右margin会吸收剩余空间,但是比宽度的吸收能力弱。

4.边框,内边距,百分比的设置与常规流一样,相对于父元素内容的宽度。

盒子位置

1.左浮动的盒子靠上左排列

2.有浮动的盒子靠上靠右排列

3浮动盒子在包含块中排列时,会避开常规流的盒子。

4常规流块盒在排列中,无视浮动盒

5行盒在排列中会避开浮动盒子

如果文字没有在行盒中,浏览器会直接生成一个行盒包裹文字,该行盒为匿名行盒。

所以有文字环绕效果。

css中的浮动

标签:直接   浮动   宽度   默认   特点   能力   元素   oat   百分比   

原文地址:https://www.cnblogs.com/tomato190/p/13207328.html

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