[css]浮动-清除浮动的3种方法
清除浮动的方法: 内墙法
注: 这是个奇淫技巧,没什么原理可言,记住即可
这个技巧又使得父box重新可以被子box撑开高度了.

隔墙法-适用于2个box之间上下排列
由于2个box高度依旧是0, 彼此之间的margin还是不生效. 可以用墙来撑开

.cl {
clear: both;
}
.h16 {
height: 16px;
}
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</div>
<div class="cl h16"></div>
<div class="box2">
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
overflow: hidden
注: 这是个奇淫技巧,没什么原理可言,记住即可
同时又使得父box又可以被子box撑开高度了.

附录
overflow: hidden的用途
表示“溢出隐藏”。所有溢出边框的内容,都要被隐藏掉。

[css]浮动-清除浮动的3种方法的更多相关文章
- 【CSS】清除浮动的五种方式
清除浮动是一件功德无量的事情23333 这里记录一下清除浮动的多种方式 *首先要明确的是,为什么要清除浮动? A 影响其他元素定位 父盒子高度为0,子盒子全部浮动.定位,子盒子不会撑开父盒子,下面的元 ...
- 【css】清除浮动的几种方式
[css]清除浮动的几种方式 因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...
- HTML&CSS基础-清除浮动
HTML&CSS基础-清除浮动 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看浮动效果 1>.HTML源代码 <!DOCTYPE html> &l ...
- CSS中隐藏内容的3种方法及属性值
CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59) 在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...
- Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题
一. 什么是标准文档流 文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个 ...
- CSS中隐藏内容的3种方法
CSS中隐藏内容的3种方法 一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出层.隐藏滚动条.清除错位和浮动等. 1.使用display:none来隐藏所有内容 display:none可 ...
- css如何实现垂直居中(5种方法)
css如何实现垂直居中(5种方法) 一.总结 一句话总结:行内只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了. 块的话可以尝试 margin:auto: ...
- css划隔横线的两种方法
css划隔横线的两种方法 方法一:用DIV,代码如下:(推荐此方法) <div style="width:800px;height:1px;margin:0px auto;pa ...
- 用 CSS 隐藏页面元素的 5 种方法
原文链接:用 CSS 隐藏页面元素的 5 种方法,转载请注明来源! 用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 disp ...
- CSS以图换字的9种方法
前面的话 CSS以图换字的技术,很久都没人提起了.它是一种在h1标签内,使用图像替换文本元素的技术,使页面在设计和可访问性之间达到平衡.本文将详细介绍CSS以图换字的9种方法 文字隐藏 在h1标签中, ...
随机推荐
- 使用mysqldump工具对数据库进行全备份
需求描述: 通过mysqldump工具的--all-databases选项对所有数据库进行备份. 操作过程: 1.通过--all-databases选项对所有的数据库进行备份 [mysql@redha ...
- tiny6410移植opencv
1.错误1, 解决办法:取消一下两个选项: 2.错误2, 解决办法: 原因是找不到pthread链接库,打开文件夹下的CmakeCache.txt进行修改 3.错误3, 解决办法:
- Linux,unix,cygwin,centeros下的tar压缩解压缩命令具体解释
tar Examples: tar -cf archive.tar foo bar # Create archive.tar from files foo and bar. tar -tvf ...
- python2.0 s12 day4
python2.0 s12 day404 python s12 day4 TengLan回顾上节内容 05 python s12 day4 迭代器原理及使用 本节大纲介绍: 1.迭代器&生成器 ...
- java中Double的isInfinite()和isNaN()
在Double和Float类中都有这两个方法,用于判断是否是无穷大及是否为非数字 public boolean isInfinite()如果此对象表示的值是正无穷大或负无穷大,则返回 true:否则返 ...
- XMPP HTTP
1.TCP连接 要想明白Socket连接,先要明白TCP连接.手机能够使用联网功能是因为手机底层实现了TCP/IP协议,可以使手机终端通过无线网络建立TCP连接.TCP协议可以对上层网络提供接口,使上 ...
- excel——之锁定表头不可编辑
前言: 设置excel表头不可编辑功能.效果如下: 这就意味着,不可随意更改表头数据,除非你有密码. 过程: 1.先随意右键打开一个单元格,查看其中的“设置单元格属性”,即 2.在选中想要编辑的那些数 ...
- EL表达式各种函数使用大全
引入<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> ...
- thinkphp5.0开发规范
命名规范 ThinkPHP5遵循PSR-2命名规范和PSR-4自动加载规范,并且注意如下规范: 目录和文件 目录不强制规范,驼峰及小写+下划线模式均支持: 类库.函数文件统一以.php为后缀: 类的文 ...
- java基础---->多线程之yield(三)
yield方法的作用是放弃当前的CPU资源,将它让给其它的任务去占用CPU执行时间.但放弃的时间不确定,有可能刚刚放弃,马上又获得CPU时间片.今天我们通过实例来学习一下yield()方法的使用.最是 ...