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 ...
随机推荐
- MyBatis笔记----@Intercepts({@Signature(type = StatementHandler.class, method = "prepare", args = {Connection.class
使用MyBatis 3.4.1或者其以上版本 @Intercepts({ @Signature(type = StatementHandler.class, method = "prepa ...
- springmvc复习笔记----springmvc姓名年龄例子：RequestParam 试水
继续 继上节http://www.cnblogs.com/tk55/p/6652394.html 重要部分颜色突出 结构 包 web.xml 乱码处理方面设置 <url-pattern>* ...
- MapReduce ----数据去重
三个文件 2017-03-10 a2017-03-11 b2017-03-12 d2017-03-13 d2017-03-142017-03-15 a 2017-03-10 e2017-03-11 b ...
- [20181109]12cR2 的pre_page_sga参数
[20181109]12cR2 的pre_page_sga参数.txt --//12CR2改变了参数pre_page_sga设置为True.设置为true有好处也有缺点.--//先看看官方的定义:ht ...
- [20170604]12c Top Frequency histogram补充.txt
[20170604]12c Top Frequency histogram补充.txt 1.环境:SCOTT@test01p> @ ver1PORT_STRING ...
- mssql sqlserver update delete表别名用法简介
转自:http://www.maomao365.com/?p=6973 摘要: 在sql脚本编写中,如果需要在update delete 中使用表别名的方法,必须按照一定的规则编写,否则将会出现相应 ...
- 前后端分离djangorestframework——解析渲染组件
解析器 解析器的作用就是服务端接收客户端传过来的数据,把数据解析成自己想要的数据类型的过程,本质就是对请求体中的数据进行解析 Accept是告诉对方我能解析什么样的数据,通常也可以表示我想要什么样的数 ...
- 单线程泵问题（com操作时间超过60s报错）
CLR 无法从 COM 上下文 0x197bf0 转换为 COM 上下文 0x197a80,这种状态已持续 60 秒.拥有目标上下文/单元的线程很有可能执行的是非 ...
- c/c++ 多维数组和指针
c/c++ 多维数组和指针 知识点 1,初始化多维数组,对应代码里的test1 2,遍历多维数组,除了最内层循环外,其他所有层都必须是引用类型,对应代码里的test2 3,指针和多维数组 ,对应代码里 ...
- JSP（一）：初识JSP
在Servlet中,我们多次用到了jsp页面,今天就来仔细聊聊JSP. 一.概念 JSP全名是Java Server Pages,可理解为Java服务端页面,是一种动态网页开发技术,其本质是一个简化的 ...