关于清除浮动 and position的一些注意点

清除浮动:对于父元素的影响清除就是:width:100%;overflow:hidden;
     对于自己临近的清除就是:clear:both;

position:

relative  不会脱离文档流,会产生偏移属性和z-index属性

absolute  会脱离文档流,会产生偏移属性和z-index属

当一个元素设置绝对定位,没有设置宽度时,元素的宽度根据内容进行调节

使用absolute实现横向两列布局:(不常用)
横向两列布局(使用absolute实现横向两列布局)常用于一列固定宽度,另一列宽度自适应的情况
(主要技能:)
1.relative------父元素 相对定位
2.absolute------自适应宽度元素绝对定位
注意:固定宽度列的高度 > 自适应宽度的列

fixed     脱离文档流,fixed总是以body为定位时的对象,总是根据浏览器的窗口来进行元素的定位,通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。

时间: 2024-11-18 09:11:07

关于清除浮动 and position的一些注意点的相关文章

关于清除浮动

晚上本来想去苹果官网看看新产品,顺便看看高大上的视频,进入之后,习惯性的打开了审查元素,然后就开始研究起了苹果的代码 看到图片列表,有这样一段: 就是下面这三行代码: .promos ul:after {  clear: both; } .promos ul:before, .promos ul:after { content: ' '; display: table; } bootstrap也是这种写法. 很显然,是用来清除浮动的,和小伙伴聊了一下,说到几个有意思的地方. 说的最多的就是dis

css清除浮动的方法总结

在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了.解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问

清除浮动的八种方法

清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了.解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题. 下面总结8种清除浮动的方法(测试已通过 ie chrome firefox opera,后面三种方法只做了解就可以了): 1,父级div定义 height 复制代码

清除浮动的方法以及各自的优缺点

1.父级div定义height <style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:200px;background:#DD

css的浮动以及如何清除浮动

css的浮动是经常会在实际中运用到,之前我对浮动的理解就是使用float,除此之外没有深入理解,后来发现对于浮动还是有必要深入理解一下. css浮动 css的浮动是float属性,该属性没有继承性,默认值为none,该属性有四个值,以下一一解释: 1)right:向右浮动 2)left:向左浮动 3)none:没有浮动 4)inherit:规定继承父元素的浮动 css的浮动实际上就是打破标准流,如果说没有浮动的元素是在一个标准流里,那么浮动的元素将脱离原本的标准流浮动. 元素的浮动效果 例子:以

清除浮动塌陷的4种经典套路

原文地址;http://www.cnblogs.com/chedabang/p/5973601.html "自古深情留不住,总是套路得人心."这些日子,各个朋友圈随时可以见到这句话的身影.的确人们常说:"多一点真诚,少一点套路.",但是最终现象写实也是那么残酷和无奈. 同样在前端攻城狮的道路,我们都是真诚尽心尽力的去学习进取.奈何先是各大浏览器厂商的大战不断,导致我们这群学习的人苦不堪言,一片水生火热呀.不得不想进各种hack方法解决.(没错,这里就是吐槽的IE6!

清除浮动clearfix

css用clearfix清除浮动 更多2013/11/4 来源:css学习浏览量:11901 学习标签: css clearfix 本文导读:写css 时总为浮动而烦恼,如果用了浮动,浮动的父层不会跟着浮动框的高度增加而增加,在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开.这个时候我们可以用clearfix清除浮动 什么是.clearfix CSS 代码   复制 .clea

元素,布局方式,BFC和清除浮动

元素:块级元素,内联元素,内联块状元素 块级元素:在默认情况下会独占一块区域                相对于块级元素的父元素来讲,块级元素占据的行默认是单独享有的.                通过设置元素的样式为: display:block;      可以让元素具有块级样式. 块级元素的特点是:水平拉伸,垂直包裹. 所谓水平拉伸,是相对于块级元素的父元素来说的. 在不设置with属性时,块级元素的width会被水平拉伸,使得width+border+margin等于父元素的widt

清除浮动的6中方法

额外标签法 使用:after 伪元素 给父元素定高 利用overflow:hidden;属性 父元素浮动 父元素处于绝对定位 在开发网页的时候经常需要用到各种浮动,此时便需要及时的清除浮动,否则将会导致布局出现问题 引出问题: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <st