如何理解css中的浮动float | 您所在的位置:网站首页 › api兼容是什么意思呀 › 如何理解css中的浮动float |
浮动
浮动的概念
什么是浮动,他在css中占据什么样的位置
网页布局的核心,就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置?
在css中有三种方式来定位位置
普通文档标准流方式 (默认方式)
浮动流方式 (飘浮)
定位方式
优势 使得布局的方式 更加多样化适用于自定义布局 劣势 因为浮动的原因,该元素盒子是飘浮在其他标准流盒子之上的 CSS浮动属性float详解浮动的几个属性值有那些?他的作用是什么 选择器:{声明(属性(float):属性值);} 属性值作用left元素盒子左浮动right元素盒子右浮动none元素盒子没有使用浮动(默认值) CSS浮动布局 三个盒子使用浮动来实现并排效果 div{ float: left; width: 200px; height: 200px; text-align: center; } div::after{ content: ""; line-height: 200px; } .box1{ background-color: aqua; } .box2{ background-color: red; } .box3{ background-color: yellow; } box 1 box 2 box 3 CSS浮动清除 清除浮动的属性:clear; 属性值作用left元素盒子清除左浮动(需要给清除浮动的第一个最左边的盒子添加clear:left清除左浮动)right元素盒子清除左浮动(需要给清除浮动的第一个最右边的盒子添加clear:right)both所有元素盒子清除(需要作用在要清除的浮动元素最下面)如果有用浮动,就应该尽量清除浮动 就好比人生苦短,有始有终 世间的繁华,只能一生去观望 美好的愿望,只能一世去实现 一世一轮回 为什么要清除浮动? 前面也有说过,因为原本浮动是用来做字体图片排版的,之后用来做div布局,必定会有一些不兼容的问题需要解决,虽然是一个缺点,但是不能说浮动元素不好用吧 清除浮动的几种方法 给浮动的最后一个标签再额外加上一个标签给上clear:both属性 优点: 通俗易懂,书写方便 缺点: 添加许多无意义的标签,结构化较差。 第一种方式的升级版:通过给高度塌陷的元素添加 :after 伪类元素 相当于在所右子元素浮动元素的最后面添加了一个标签,加上clear:both;优点也体现出来了 优点: 符合闭合浮动思想 结构语义化正确 缺点: 由于IE低版本浏览器ie7以下不支持:after伪类元素,但是可以通过添加zoom:1来做ie的兼容 给父级元素添加overflow属性方法 可以通过触发BFC的方式来实现清除浮动效果。 可以给父级添加: overflow为 hidden|auto|scroll 都可以实现。 注意:none不可以,他不会触发BFC 优点: 代码简洁 缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素和如果使用auto和scroll会出现滚动条,一般情况下是不需要滚动条的。通用 万能清浮法 该方法是最兼容的方法了,几乎解决了所有会出现版本问题的方式 .clearAll{ zoom:1; /*因为伪类元素在ie7及以下不兼容的兼容方法*/ } .clearAll:after{ center:""; display:block; /* 设置块元素,这样他不会和元素并排,而是最后一个浮动元素的下面*/ clear:both; /* 清除浮动 上面的三个都要有,缺一不可,下面是解决兼容问题*/ overflow:hidden; /*再加上一层保障,就万无一失了*/ visibility:hidden; /*把这个伪元素彻底隐藏,但是他还是存在*/ height:0; /*给这个伪元素加上高度,这样他就算在center里面写内容也不显示*/ } |
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |