清除浮动的方法: 内墙法

注: 这是个奇淫技巧,没什么原理可言,记住即可

这个技巧又使得父box重新可以被子box撑开高度了.

隔墙法-适用于2个box之间上下排列

由于2个box高度依旧是0, 彼此之间的margin还是不生效. 可以用墙来撑开

  1. .cl {
  2. clear: both;
  3. }
  4. .h16 {
  5. height: 16px;
  6. }
  1. <div class="box1">
  2. <ul>
  3. <li>HTML</li>
  4. <li>CSS</li>
  5. <li>JS</li>
  6. </ul>
  7. </div>
  8. <div class="cl h16"></div>
  9. <div class="box2">
  10. <ul>
  11. <li>学习方法</li>
  12. <li>英语水平</li>
  13. <li>面试技巧</li>
  14. </ul>
  15. </div>

overflow: hidden

注: 这是个奇淫技巧,没什么原理可言,记住即可

同时又使得父box又可以被子box撑开高度了.

附录

overflow: hidden的用途

表示“溢出隐藏”。所有溢出边框的内容,都要被隐藏掉。

[css]浮动-清除浮动的3种方法的更多相关文章

  1. 【CSS】清除浮动的五种方式

    清除浮动是一件功德无量的事情23333 这里记录一下清除浮动的多种方式 *首先要明确的是,为什么要清除浮动? A 影响其他元素定位 父盒子高度为0,子盒子全部浮动.定位,子盒子不会撑开父盒子,下面的元 ...

  2. 【css】清除浮动的几种方式

    [css]清除浮动的几种方式   因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...

  3. HTML&CSS基础-清除浮动

    HTML&CSS基础-清除浮动 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看浮动效果 1>.HTML源代码 <!DOCTYPE html> &l ...

  4. CSS中隐藏内容的3种方法及属性值

    CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59)   在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...

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

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

  6. CSS中隐藏内容的3种方法

    CSS中隐藏内容的3种方法 一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出层.隐藏滚动条.清除错位和浮动等. 1.使用display:none来隐藏所有内容 display:none可 ...

  7. css如何实现垂直居中(5种方法)

    css如何实现垂直居中(5种方法) 一.总结 一句话总结:行内只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了. 块的话可以尝试 margin:auto: ...

  8. css划隔横线的两种方法

    css划隔横线的两种方法  方法一:用DIV,代码如下:(推荐此方法)    <div style="width:800px;height:1px;margin:0px auto;pa ...

  9. 用 CSS 隐藏页面元素的 5 种方法

    原文链接:用 CSS 隐藏页面元素的 5 种方法,转载请注明来源! 用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 disp ...

  10. CSS以图换字的9种方法

    前面的话 CSS以图换字的技术,很久都没人提起了.它是一种在h1标签内,使用图像替换文本元素的技术,使页面在设计和可访问性之间达到平衡.本文将详细介绍CSS以图换字的9种方法 文字隐藏 在h1标签中, ...

随机推荐

  1. 帝国CMS当前位置中的“首页”二字如何修改

    1.帝国CMS当前位置首页那两个字在哪里可以修改吗? 2.[!--newsnav--]该处的首页链接,请问在哪儿修改? 3.导航条[!--newsnav--]默认首页为:“首页”可以更改么? 4.导航 ...

  2. git for c#, commit本地,pushserver

    //ok private static void push() { string wkDir = @"E:\DotNet2010\单位project\Git.Client\lib2Test\ ...

  3. day06<面向对象>

    面向对象(面向对象思想概述) 面向对象(类与对象概述) 面向对象(学生类的定义) 面向对象(手机类的定义) 面向对象(学生类的使用) 面向对象(手机类的使用) 面向对象(一个对象的内存图) 面向对象( ...

  4. swift swift学习笔记--函数和闭包

    使用 func来声明一个函数.通过在名字之后在圆括号内添加一系列参数来调用这个方法.使用 ->来分隔形式参数名字类型和函数返回的类型 func greet(person: String, day ...

  5. windows平台的游戏运行库

    每一个都在PC上玩过游戏的人,都知道要安装一些必备的游戏运行库,游戏才能运行,这里指的PC是特指Windows操作系统平台.一般来说最常见的运行库是DirectX.Microsoft Visual C ...

  6. Access数据操作-02

    数据库连接 MDB文件 :Provider=Microsoft.Jet.OLEDB.4.0;Data Source=*.mdb ;Persist Security Info=False; AccDB文 ...

  7. 使用rlwrap调用sqlplus中历史命令

    此文来自http://www.cnblogs.com/mchina/archive/2013/03/08/2934473.html 在此谢谢原创作者. 在Linux中运行SQL*Plus,不能调用历史 ...

  8. oracle SUM函数

    select change_type as change_type, sum(points1) as points from (select DECODE(p.change_type, , ' 兑换商 ...

  9. Binary XML file line #17<vector> tag requires viewportWidth > 0

    Android高版本对比低版本 在我的项目中更改成 //buildToolsVersion '21.1.2'buildToolsVersion '24.0.1' // 24.0.1 必须用这个否则报B ...

  10. Sass-学习笔记【基础篇】

    最下边附结构图 在线编辑器网址如下:http://sassmeister.com/  注意编写的时候,符号千万别用了中文的:.:.....之类的,会报错,Sass也转换不成css. less和sass ...