摘要:浮动定义使元素脱离文档流,按照指定的方向发生移动,遇到父级的边界或者相邻的浮动元素就会停下来,当浮动并不是全动脱离文档流。
这仅是我个人看到的,如果补充,还请大家不要吝啬当个键盘侠,谢谢!
文档流文档中可显示的元素在排列时候的开始位置以及他们所占的区域。
因为页面中的元素分为不同的种类,所以他们会按各自的特点去显示,在页面中所占的区域不是一样的。会按从上到下,从左到右的顺序输出内容。
浮动 float定义
使元素脱离文档流,按照指定的方向发生移动,遇到父级的边界或者相邻的浮动元素就会停下来,当浮动并不是全动脱离文档流。 值 left、right、none 特征 1、块元素可以在一行显示 2、按照一个指定的方向移动,遇到父级的边界或者相邻的浮动元素就会停下来 3、行内元素支持宽高 4、脱离文档流 5、块元素默认宽度会改变(包裹性) 6、父级高度塌陷(破坏性) 子元素浮动后,父元素高度不会自动撑开。 7、换行不会被解析成空格 浮动后的元素就会脱离文档流了,那它就不属于文档流里的结构了,所以换行、空格都跟父级没关系了
特征4、脱离文档实例:
html部分
divdemo1divdemo02hello
css部分
div{ float:left; width:100px; height:100px; background:yellowgreen; } span{ float:right; width:100px; height:100px; border:1px solid #333; }
特征5、块级元素默认高度会改变
hello world/*css代码部分*/ .div{ height:50px; floalt:left; border:1px solid #333; }
特征6、父元素高度塌陷实例
/*css代码*/ .parent{ /*float:left;*/ border:1px solid #333; } .children{ width:100px; height:100px; float:left; border:1px solid #f00; background: #ccc }do you relaize something?
7、换行不会被解析成空格
脱离文档流/*css代码*/ .parent{ border: 1px solid #f00; } .box{ width: 100px; height: 200px; background: green; color: #fff; float: left; }boxboxbox
脱离文档流指的是元素不在页面中占位置,定位是完全脱离文档流
实例:
html代码
指的是元素不在页面中占位置了,但是文档却还占着位置。。指的是元素不在页面中占位置了,但是文档却还占着位置。。。元素不在页面中占位置了,但指的是元素不在页面中占位置了,但是文档却还占着位置。。。是文档却还占着位置。。。的是元素不在页面中占位置了,但是文档却还占着位置。。。指的是元素不在页面中占位置了,但是文档却还占着位置。。。指的是元素不在页面中占位置了,但是文档却还占着位置。。。指的是元素不在页面中占位置了,但是文档却还占着位置。。。指的是元素不在页面中占位置了,但是文档却还占着位置。。。指的是元素不在页面中占位置了,但是文档却还占着位置。。。
css代码
.div1{ width: 100px; height: 50px; background: green; color: #fff; border: 5px solid blue; float: left; /*margin: 20px; padding: 20px;*/ } span{ width:100px; height:50px; }float与inline-block的区别
对于这一个区别,除了前面脱离文档流和父元素高度塌陷的差异,还有一个区别是:
如果一排元素高度不一至的情况下,想让他们按顺序排列就可以选择inline-block
实例:
清除浮动的方法
1、clear 2、给父级添加高度 有的时候是不能给父级添加高度的,所以这个方法就用不了(父级没有高度的情况下) 3、inline-block 具胡与上一个的清除浮动一样的总是,同时加了以后这个元素就没有办法居中了 4、overflow:hidden; 如果子级有定位的话,并且这个定位超出了父级的范围,那样的话就看不到了,所以不能加这个命令 5、空标签 空标签是没有内容,但是它的作用是用来清除浮动的,所以不符合行为、样式、结构相分离的标准 ie6下标签是有一个最小高度19px,解决后也会有2像素的偏差 6、br清除浮动 与上面的问题是一样 7、after伪类清除浮动 after 代表选择到的元素的内容的最后面 after伪类的内容默认是一个行内元素 content 设置的内容
代码示例:
/*css代码*/ .parent{ border: 1px solid #f00; /*height: 100px;*/ /*display: inline-block; margin: 0 auto;*/ /*overflow: hidden;*/ } .clearfix:after{ content:" "; display:block; clear:both; } .box{ width: 100px; height: 100px; background: green; float: left; }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/116889.html
摘要:浮动定义使元素脱离文档流,按照指定的方向发生移动,遇到父级的边界或者相邻的浮动元素就会停下来,当浮动并不是全动脱离文档流。 这仅是我个人看到的,如果补充,还请大家不要吝啬当个键盘侠,谢谢! 文档流 文档中可显示的元素在排列时候的开始位置以及他们所占的区域。 因为页面中的元素分为不同的种类,所以他们会按各自的特点去显示,在页面中所占的区域不是一样的。会按从上到下,从左到右的顺序输出内容。...
摘要:属性是中最重要的用于控制布局的属性。布局的高度多数情况下,布局中结构化元素乃至任何元素的高度是不必设定的。更新效果如图以上措施使布局有了明显改观。 这是《CSS设计指南》的读书笔记,用于加深学习效果。 display 属性 display是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值。对于大多数元素它们的默认值通常是 block 或 inline ...
摘要:属性是中最重要的用于控制布局的属性。布局的高度多数情况下,布局中结构化元素乃至任何元素的高度是不必设定的。更新效果如图以上措施使布局有了明显改观。 这是《CSS设计指南》的读书笔记,用于加深学习效果。 display 属性 display是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值。对于大多数元素它们的默认值通常是 block 或 inline ...
摘要:当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。详见浮动与清除浮动浮动相关知识属性的取值元素向左浮动。是相对长度单位,相对于当前对象内文本的字体尺寸。 这些个知识点是我个人认为的,下面我们就来看看这些个知识点。 1.怎么让一个不定宽高的 DIV,垂直水平居中? 使用Flex 只需要在父盒子设置:display: flex; justify-content: cent...
阅读 3283·2021-11-25 09:43
阅读 2972·2021-10-15 09:43
阅读 1906·2021-09-08 09:36
阅读 2880·2019-08-30 15:56
阅读 704·2019-08-30 15:54
阅读 2634·2019-08-30 15:54
阅读 2925·2019-08-30 11:26
阅读 1184·2019-08-29 17:27