H5 70-清除浮动方式五
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>70-清除浮动方式五</title>
<style>
*{
margin: 0;
padding: 0;
}
/*
div{
width: 100px;
height: 100px;
background-color: red;
overflow: hidden;
}
*/
/*
.box1{
background-color: red;
overflow: hidden;
*zoom:1;
}
.box2{
background-color: green;
}
.box1 p{
width: 100px;
background-color: blue;
}
.box2 p{
width: 100px;
background-color: yellow;
}
p{
float: left;
}
*/
.box1{
width: 200px;
height: 200px;
background-color: red;
/*border: 1px solid #000;*/
overflow: hidden;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
margin-top: 20px;
}
</style>
</head>
<body>
<!--
1.overflow: hidden;作用
1.1可以将超出标签范围的内容裁剪掉
1.2清除浮动
1.3可以通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来
--> <!--
<div>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
--> <!--
<div class="box1">
<p>我是文字1</p>
<p>我是文字1</p>
<p>我是文字1</p> </div> <div class="box2">
<p>我是文字2</p>
<p>我是文字2</p>
<p>我是文字2</p>
</div>
-->
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
H5 70-清除浮动方式五的更多相关文章
- HTML连载50-伪元素选择器、清除浮动方式五
一.伪元素选择器 1.什么是伪元素选择器 伪元素选择器作用给指定标签的内容前面添加一个子元素,或者给指定标签的内容后面添加一个子元素. 2.格式: 标签名称::before{ 属性名称:值: } 给指 ...
- 第五篇：web之前端之float的几种清除浮动方式
前端之float的几种清除浮动方式 前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.flo ...
- 前端之float的几种清除浮动方式
前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.float清除方式1 <!DOCTYPE ...
- 【CSS】清除浮动的五种方式
清除浮动是一件功德无量的事情23333 这里记录一下清除浮动的多种方式 *首先要明确的是,为什么要清除浮动? A 影响其他元素定位 父盒子高度为0,子盒子全部浮动.定位,子盒子不会撑开父盒子,下面的元 ...
- css浮动（folat），清除浮动（clear）（另加两种清除浮动方式，总共三种清除浮动方式）
css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...
- H5 69-清除浮动方式四
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- H5 67-清除浮动方式三
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- H5 66-清除浮动方式二
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- H5 65-清除浮动方式一
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Django之--通过MVC架构的html模板展示Hello World!
上一篇:Django之--网页展示Hello World! 初步说明了如何使用Django来显示hello world,本文略微进阶下使用html模板来展示hello world~ 首先在mysite ...
- SQL Server "允许远程连接到此服务器" 配置
在SQL Server的属性-->连接中我们可以看到这样一个选项:'允许远程连接到此服务器'(英文是remote access),其默认值是1,表示此选项开启. 但是这个参数并非是字面上所显示的 ...
- c/c++ 二叉排序树
c/c++ 二叉排序树 概念: 左树的所有节点的值(包括子节点)必须小于中心节点,右树所有节点的值(包括子节点)必须大于中心节点. 不允许有值相同的节点. 二叉排序树的特点: 中序遍历后,就是从小到大 ...
- Windows Server 2016-域站点链接及子网调整
很多情况下我们在判别域控间或者域中各站点同步是否正常往往的操作内容就是查看两台域控间PING或者解析是否正常,或者查看双方防火墙是否关闭,但实际情况下我们需要注意的是,保证站点间Active Dire ...
- .svn文件夹特别大
一个项目通过svn管理,迭代开发一年之后,.svn目录达到20G或更大,对于SSD硬盘来说是非常占用空间的,经过我的尝试,可以使用tortoiseSVN自带的cleanup为文件夹瘦身. 操作方法: ...
- Excel 单元格不能设置超链接
最近在重做系统后 新安装office后 原先的Excel中设置的超链接不能正常使用了 如果新配置的超链接也不能使用 解决方法: 步骤1:打开开始菜单,在运行里输入regedit,回车 步骤2 在 ...
- LeetCode算法题-N-ary Tree Level Order Traversal（Java实现）
这是悦乐书的第225次更新,第238篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第92题(顺位题号是429).给定n-ary树,返回其节点值的级别顺序遍历.(即,从左到 ...
- SecureCRT窗口输出代码关键字高亮设置
设置方法: 下载配置文件:本站下载:Highlights.css (下载重命名为 Highlights.ini ) 原站下载:http://download.feralpacket.org/La ...
- Servlet工作原理解析（tomcat7、嵌入式服务器）
目录 Servlet 容器Tomcat Servlet 容器的启动过程 Web 应用的初始化工作 Servlet 体系结构 创建 Servlet 对象(如何被加载) 初始化 Servlet(如何被 ...
- 设计模式のFilterPattern（过滤器模式）----结构模式
一.产生背景 我们有一堆“人”的对象,我们应该怎么选择出其中的男性.女性或者其他类型的呢?这时候我们可以用过滤器模式 二.通常做法 我们将创建一个 Person 对象.Criteria 接口和实现了该 ...