总结: 1.无序列表去除前面的小点点：list-style-type: none;
2.设置左浮动的间距。
外边距：margin :如果设定4个值就是，上右下左的顺序设置
如果设置3个值，那么左和右边一个值
如果俩值，那么上和下一个值，左和右一个值
如果一个值，那么上下左右一个值
也可以一个值单独设置
;
3.内边距 padding：设置规则和外边距一样。
4.溢出隐藏：overflow:hidden
5.溢出加滚动条：overflow：scroll
6.浮动：float：left/right 左移/右移
7.清除浮动：clear:left/right/both 左/右/全部

div的浮动、清除浮动和布局的更多相关文章

  1. Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题

    一. 什么是标准文档流 文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个 ...

  2. div+css之清除浮动

    当元素有浮动属性时,会对其父元素或后面的元素产生影响,会出现一个布局错乱的现象,可以通过清除浮动的方法来解决浮动的影响. 浮动的清理(clear): 值:none:默认值.允许两边都可以有浮动对象:l ...

  3. [css]浮动-清除浮动的3种方法

    清除浮动的方法: 内墙法 注: 这是个奇淫技巧,没什么原理可言,记住即可 这个技巧又使得父box重新可以被子box撑开高度了. 隔墙法-适用于2个box之间上下排列 由于2个box高度依旧是0, 彼此 ...

  4. CSS清除浮动技巧

    一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了f ...

  5. 【转】CSS清除浮动_清除float浮动

    CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ...

  6. 浮动（float）与清除浮动（clear）

    上一篇中我们了解了块级元素与内联元素,今天将自己查阅的资料整理写出来,与大家一起理解什么是浮动,以及怎样清除浮动,本文以div元素为例. 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮 ...

  7. CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性

    最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里 ...

  8. CSS清除浮动方法集合

    CSS清除浮动方法集合 一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. ...

  9. CSS清除浮动_清除float浮动

    2.clear:both清除浮动为了统一样式,我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“</div>”结束前加此di ...

  10. css清除浮动的集中方法

    一:浮动产生的副作用 1.父元素的背景不能显示 2.父元素的边框不能撑开 3.padding和margin失效 二:清除浮动的方法 1.给父元素设置高度:这样可以清除浮动,但是子元素内容高度不固定,这 ...

随机推荐

  1. jQuery的立即调用表达式

    立即调用表达式 任何库与框架设计的第一要要点就是解决命名空间与变量污染的问题.jquery就是用javascript函数作用域的特性,采用立即调用表达式包裹了自身的方法来解决这个问题的. jQuery ...

  2. [LeetCode][Java] N-Queens II

    题目: Follow up for N-Queens problem. Now, instead outputting board configurations, return the total n ...

  3. Test While You Sleep (and over Weekends)

    Test While You Sleep (and over Weekends) Rajith Attapattu RELAX. I am not referring to offshore deve ...

  4. Tomcat PK Resin

    特征 Tomcat Resin 所属公司 Apache CAUCHO 用户数 多 少 可參考文档 多 少 与Eclipse集成复杂度 适中 较复杂. Eclipse下调试开发 简便 复杂.更新类后会自 ...

  5. luogu1040 加分二叉树

    题目大意 设一个n个节点的二叉树tree的中序遍历为(l,2,3,…,n),其中数字1,2,3,…,n为节点编号.每个节点都有一个分数(均为正整数),记第j个节点的分数为di,tree及它的每个子树都 ...

  6. js将图片转为base64编码，以字符串传到后台存入数据库

    (前台在中approve_edit.html中,后台不变) 链接参考:http://www.cnblogs.com/Strom-HYL/p/6782176.html 该链接文中并没有用到easyUI的 ...

  7. Ubuntu下用命令行快速打开各类型文件(转)

    nautilus /media/pm/文档/book/system/必读nautilus /media/pm/文档/book/android/ndk 内核/framerwork/android wai ...

  8. What is a good buffer size for socket programming?

    http://stackoverflow.com/questions/2811006/what-is-a-good-buffer-size-for-socket-programming 问题: We ...

  9. codeforces 939E Maximize! 双指针（two pointers）

    E. Maximize! time limit per test 3 seconds memory limit per test 256 megabytes input standard input ...

  10. E20171028-hm

    stick   n. 棍棒,棍枝; 枝条; 操纵杆; 球棍; stopwatch  n. (赛跑等记时用的) 秒表,跑表; agency   n. 代理; 机构; 力量; various   adj. ...