织梦网站分享插件,资阳网站优化,辽宁省住房和建设厅网站,wordpress评论自动刷新最近学习css发现了高度塌陷时候要清除浮动,为了理解清楚浮动原理,网上找了不少资料,发现都写的不是很清楚,而且都是一模一样的内容,我在里分享一下我对清楚浮动原理的理解,
如果你已经很了解什么是浮动和浮动的效果你可以直接跳转到三.如何清除浮动(重点)阅读
一.什么是浮动首…最近学习css发现了高度塌陷时候要清除浮动,为了理解清楚浮动原理,网上找了不少资料,发现都写的不是很清楚,而且都是一模一样的内容,我在里分享一下我对清楚浮动原理的理解,
如果你已经很了解什么是浮动和浮动的效果你可以直接跳转到三.如何清除浮动(重点)阅读
一.什么是浮动首先我们需要知道定位 元素在页面中的位置就是定位解决问题之前我们先来了解下几种定位方式 1、普通流定位 static默认方式 普通流定位又称为文档流定位是页面元素的默认定位方式 页面中的块级元素按照从上到下的方式逐个排列 页面中的行内元素按照从左到右的方式逐个排列 但是如何让多个块级元素在一行内显示? 这里就引出了浮动定位 2、浮动定位 float float属性 取值为 left/right 这个属性原本不是用来布局的而是用来做文字环绕的但是后来人们发现做布局也不错就一直这么用了甚至有些时候都忘了用他做文字环绕 3、相对定位 relative 元素会相对于它原来的位置偏移某个距离改变元素位置后元素原本的空间依然会被保留 属性position 取值relative 配合着 偏移属性(top/right/bottom/left)实现位置的改变4、绝对定位 absolute 如果元素被设置为绝对定位的话将具备以下几个特征 1、脱离文档流-不占据页面空间 2、通过偏移属性固定元素位置 3、相对于 最近的已定位的祖先元素实现位置固定 4、如果没有已定位祖先元素那么就相对于最初的包含块(body,html)去实现位置的固定 属性position 取值absolute 配合着 偏移属性(top/right/bottom/left)实现位置的固定5、固定定位 fixed 将元素固定在页面的某个位置处不会随着滚动条而发生位置移动 属性position 取值fixed 配合着 偏移属性(top/right/bottom/left)实现位置的固定
二.浮动的效果 浮动 之后会怎么样 1、浮动定位元素会被排除在文档流之外-脱离文档流(不占据页面空间),其余的元素要上前补位 2、浮动元素会停靠在父元素的左边或右边或停靠在其他已浮动元素的边缘上(元素只能在当前所在行浮动) 3、浮动元素依然位于父元素之内 4、浮动元素处理的问题-解决多个块级元素在一行内显示的问题 注意 1、一行内显示不下所有的已浮动元素时最后一个将换行 2、元素一旦浮动起来之后那么宽度将变成自适应(宽度由内容决定) 3、元素一旦浮动起来之后那么就将变成块级元素,尤其对行内元素影响最大 块级元素允许修改尺寸 行内元素不允许修改尺寸 4、文本行内元素行内块元素时采用环绕的方式来排列的是不会被浮动元素压在底下的会巧妙的避开浮动元素 浮动 之后会有什么样的影响 由于浮动元素会脱离文档流所以导致不占据页面空间所以会对父元素高度带来一定影响。如果一个元素中包含的元素全部是浮动元素那么该元素高度将变成0高度塌陷 三.如何清除浮动(重点)解决方案 及 原理分析
网上有很多种方法,我这里只介绍一种非常好用的方法,设置class名为clearfix
原理如果子元素全部浮动父元素就会塌陷所以在所有浮动子元素后添加一个没有浮动元素把父元素撑起来这个元素找不到、不占据空间不能让它里面有内容有内容也要隐藏 .clearfix:after{content:.; clear:both; display:block; height:0; overflow:hidden; visibility:hidden; } .clearfix:after{zoom1}/*解决IE的问题*///visibilityhidden隐藏元素但是位置留着//displaynone隐藏元素不占据空间彻底隐藏//after伪对象选择符 本文转载于:猿2048⇛https://www.mk2048.com/blog/blog.php?idi2ikhabtitlecss清除浮动的原理
