网站 建设 欢迎你,辽阳百姓网免费发布信息网,商城网站建站方案,网站顶部滑动展示的div层提示效果浮动
介绍#xff1a; 其实早期的浮动是用来文字环绕图片效果,但是后来发现浮动还可以设置页面布局问题 块元素在文档流中默认垂直排列#xff0c;如果希望块元素在页面中水平排列#xff0c;可以使块元素脱离文档流
特点#xff1a; 哪个元素设置浮动#xff0c;哪个…浮动
介绍 其实早期的浮动是用来文字环绕图片效果,但是后来发现浮动还可以设置页面布局问题 块元素在文档流中默认垂直排列如果希望块元素在页面中水平排列可以使块元素脱离文档流
特点 哪个元素设置浮动哪个元素就会脱离文档流 如果给上边的元素设置浮动时下边的元素就会跑到上边元素的位置上上边元素会覆盖住下边的元素原因是上面的元素已经脱离了文档流不占据位置 脱离文档流的元素默认在父元素的顶部不会超出父元素的内容 脱离文档流的元素不再区分块和行内统一会变成行内块 无论浮动的元素是右还是左浮动下面的元素都会默认朝左上角 如果父元素设置了padding,那么浮动的子元素不会超出padding以外 元素浮动主要就是为了元素之间在一行排列页面布局问题 浮动的元素并不是根据上下排列的顺序来设置左右浮动每个元素可以任意设置浮动位置 如果上下元素都浮动了他们就会按照顺序进行排列 如果上边有元素未设置浮动下边设置浮动的元素会被挡住 清除浮动
clear属性
清除浮动指定段落的左侧或右侧不允许浮动的元素
属性描述right清除向右浮动的元素left清除向左浮动的元素both清除左右浮动的元素 方法一额外标签法w3c提出不推荐
是给最后一个浮动的元素后面添加一个空标签,给空标签设置clear属性清除浮动
原理
额外标签法主要就是调整额外标签的自身通过调整自身来使自己不要和浮动元素排列在一起。
缺点
如果页面中出现很多的浮动就需要添加很多空标签清除浮动就会导致很繁琐所以不推荐 方法二给父元素添加overflow属性不推荐
给父元素添加overflow属性非visible属性值auto、scroll、hidden
缺点
如果子元素内容过多会出现隐藏问题或者页面布局发生改变不常用此属性 方法三给父元素设置after伪元素
伪元素创建的元素是行内元素
其实原理和额外标签法类似 /*只写一个冒号是为了兼容其他浏览器不支持::*/ .clearfix:after {/*伪元素创建的元素是行内元素*//*content值要加一个小点为了防止低版本浏览器解析时出现空隙问题*/content: .;/* 转化为块元素*/display: block;height: 0;/*隐藏content里面的小点*/visibility: hidden;/*清除浮动*/clear: both;}/*以下是为低版本浏览器做的适配*/.clearfix {*zoom: 1;/* 星号代表了只有ie6和ie7才会解析这段代码zoom是ie6和ie7的清除浮动方法 */} 方法四给父元素添加双伪元素after before 推荐 .clearfix:before,.clearfix:after {content: ;display: table;/*触发BFC*/clear: both;} BFC 页面元素中的隐含属性Block Formatting Context 即块格式化上下文简称BFC 当开启元素的BFC以后元素会变成一个独立的布局区域不会在布局上影响到外面的元素 BFC 理解为一个封闭的大箱子箱子内部的元素不会影响到外部。 开启BFC后元素将会具有如下的特性 父元素的垂直外边距不会和子元素重叠 开启BFC的元素不会被浮动元素所覆盖 开启BFC的元素可以包含浮动的子元素可解决高度塌陷 如何开启元素的BFC 设置元素浮动不推荐 使用这种方式开启虽然可以撑开父元素但是会导致父元素的宽度丢失 而且使用这种方式也会导致下边的元素上移不能解决问题 设置元素为inline-block不推荐 可以解决问题但是会导致宽度丢失不推荐使用这种方式 将元素的overflow设置为一个非visible的值 推荐 scroll、auto、hidden 设置元素绝对定位 元素也会脱离文档流虽然可以撑开父元素但是会导致父元素的宽度丢失 而且使用这种方式也会导致下边的元素上移不能解决问题 推荐方式将overflow设置为hidden是副作用最小的开启BFC的方式
