Position:

absolute

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit 规定应该从父元素继承 position 属性的值。

float:

块级元素水平方向的auto,块级元素的margin、border、padding以及content宽度之和等于父元素width。使用auto属性在父元素宽度变化的时候,该元素的宽度也会随之变化。

当该元素被设为浮动时,该元素的width就变成了内容的宽度了,由内容撑开,也就是所谓的有了包裹性。overflow | position:absolute | float:left/right都可以产生包裹性,替换元素也同样具有包裹性。

在具有包裹性的元素上想利用width : auto;来让元素宽度自适应浏览器宽是不行的。

元素浮动后,父元素会塌陷此时可以使用clear来清除浮动,让父元素就会包含它中间的浮动元素了

参考:CSS浮动

clear:

CSS clear属性指定:一个元素是紧挨着前面的浮动元素,还是必须移动到它们的下面(浮动被清除)。
clear属性既可以用于浮动元素,也可以用于非浮动元素。

当应用于非浮动块时,它将元素的边框边界移动到所有相关浮动元素外边界的下方。这个行为作用时会导致外边距折叠不起作用。

当应用于浮动元素时,它将元素的外边界移动到所有相关的浮动元素外边界的下方。这会影响后面浮动元素的布局,后面的浮动元素的位置无法高于它之前的元素。

要被清除的相关浮动元素指 在相同块级格式化上下文中的前置浮动。

注释:如果你想要一个元素将所有浮动元素包含在内,你既可以将这个容器设置为浮动,又可以通过 ::after 伪元素设置clear属性作为替代。

#container:after {
content: "";
display: block;
clear: both;
}

clear的方式有2种, 一种是使用伪类,另外一种是使用一个clear的元素,这样外面的元素就会包含它中间的浮动元素了。

外边距合并:

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

注释:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

参考: CSS 外边距合并

参考文章:

这可能是史上最全的CSS自适应布局总结

https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear

http://sonspring.com/journal/clearing-floats

http://yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/

 

Css中position、float和clear整理的更多相关文章

  1. CSS中的float与clear

    参考: http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html http://www.cnblogs.com/iloveyou ...

  2. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  3. 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html

    深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...

  4. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  5. 关于CSS中的float可能出现的小问题

    关于CSS中的float可能出现的小问题 前言:最近学习CSS的float所遇到点小问题,然后顺便分享给大家. 一.什么是CSS以及float (一) CSS概述 CSS是层叠样式表(英文全称:Cas ...

  6. CSS中position和header和overflow和background

    <!DOCTYPE html> <!--CSS中position属性--> <html lang="en"> <head> < ...

  7. CSS中"position:relative"属性与文档流的关系

    前言 近期遇到一个问题--"position:relative"到底会不会导致元素脱离文档流?主流观点是不会,但都给不出一个有说服力的论据.最后我自己佐证了一番,总算有了个结果:& ...

  8. CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...

  9. css 中 的 float :left 和 clear :both

    float:left;(左浮动)他使得指定元素脱离普通的文档流而产生的特别的布局特性.并且FLOAT必需应用在块级元素之上,也就是说浮动并不应用于内联标签.或者换句话来说当应用了FLOAT那么这个元素 ...

  10. 如何理解css中的float

    最近一段时间一直在为一个即将上线的新站进行一些前端开发.自然,对CSS的使用是必不可少的了.我们在CSS 中很多时候会用到浮动来布局.常见的有 float:left 或者 float:right .简 ...

随机推荐

  1. 【Codewars】7×7 摩天大楼

    介绍 链接:7×7 Skyscrapers C#答案(原因:懒,但是完全可以转成C++):bajdcc/learnstl 题目(机翻): 在7乘7格的网格中,你只想在每个广场上放置一个摩天大楼,只有一 ...

  2. Python2 获取两日期之间的每一天

    import datetime def getEveryDay(begin_date,end_date): date_list = [] begin_date = datetime.datetime. ...

  3. awk打印指定列以后的所有内容

    (1)使用awk将文件的前12列替换为空 awk '{for(i=1;i<=12;i++)$i="";print $0}' localhost_access_log //写法 ...

  4. sqlserver 用户名创建 及权限配置

    打开SQL Server2008,以windows身份验证模式登陆(其他版本同理) 在"对象资源管理器"中展开"安全性",右击"登录名",在 ...

  5. python content list(1--4)

    part 1 python language 1. environment building and config 2. variable and data type 3. programming b ...

  6. hdu 5215 Cycle

    题意:找到一个图中是否含有奇环和偶环 题解: 1.用了两种发法.一个就是跟bc给的答案一样,先求弱联通分量.再在环中找奇偶环 2.我想到的一个略微省些代码量的方法.边求联通分量,边推断是否含有奇环偶环 ...

  7. SVN回滚至某个版本

    今天新上传的版本出错了,需要回滚至之前的版本. 记录一下过程. 在项目文件夹下. 1.打开日志历史.右键单击,TortoiseSVN-->show log 2.要回滚至版本x.在版本x上右键单击 ...

  8. BM和KMP字符串匹配算法学习

    BM和KMP字符串匹配算法学习 分类: 研究与学习 字符串匹配BM(Boyer-Moore)算法学习心得 http://www.cnblogs.com/a180285/archive/2011/12/ ...

  9. 早前的java笔记

    多个if语句时即使前一个if为真,后面的if也要继续判断, 如果用else if 则只有前者为假的时候它的if 才接着判断. if else 语句 if a>=5 shuchu b=10 els ...

  10. java继承2——类与继承(转)

    一.你了解类吗? 在Java中,类文件是以.java为后缀的代码文件,在每个类文件中最多只允许出现一个public类,当有public类的时候,类文件的名称必须和public类的名称相同,若不存在pu ...