<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>65-清除浮动方式一</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
height: 20px;
background-color: red;
}
.box2{
background-color: green;
}
.box1 p{
width: 100px;
background-color: blue;
}
.box2 p{
width: 100px;
background-color: yellow;
}
p{
float: left;
}
</style>
</head>
<body>
<!--
1.清除浮动的第一种方式
给前面一个父元素设置高度 注意点:
在企业开发中, 我们能不写高度就不写高度, 所以这种方式用得很少
-->
<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>
</body>
</html>

H5 65-清除浮动方式一的更多相关文章

  1. 前端之float的几种清除浮动方式

    前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.float清除方式1 <!DOCTYPE ...

  2. 第五篇:web之前端之float的几种清除浮动方式

    前端之float的几种清除浮动方式   前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.flo ...

  3. HTML连载50-伪元素选择器、清除浮动方式五

    一.伪元素选择器 1.什么是伪元素选择器 伪元素选择器作用给指定标签的内容前面添加一个子元素,或者给指定标签的内容后面添加一个子元素. 2.格式: 标签名称::before{ 属性名称:值: } 给指 ...

  4. css浮动(folat),清除浮动(clear)(另加两种清除浮动方式,总共三种清除浮动方式)

    css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...

  5. H5 70-清除浮动方式五

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. H5 69-清除浮动方式四

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. H5 67-清除浮动方式三

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. H5 66-清除浮动方式二

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. css清除浮动方式总结

    1.通过父元素overflow:hidden,缺点:超出部分隐藏,不推荐使用 <!DOCTYPE html> <html lang="en"> <he ...

随机推荐

  1. ORA-1652: unable to extend temp segment by 128 in tablespace xxx Troubleshootin

    当收到告警信息ORA-01652: unable to extend temp segment by 128 in tablespace xxxx 时,如何Troubleshooting ORA-16 ...

  2. C#-结构体(十)

    结构体概念 在C#中,结构体是值类型,一般适用于表示类似Point.Rectangle.Color的对象 值类型能够降低对堆的管理.使用.降低垃圾回收,表现出更好的性能.可是值类型也有不好的一面.会涉 ...

  3. 数据库之mysql篇(4)—— navicat操作mysql

    navicat 1.简介: navicat是一个软件,旗下针对不同数据库有不同的软件版本,支持以下数据库,还是挺厉害的: 这里我采用navicat for mysql版本.实现图形化的操作mysql, ...

  4. 使用administrator身份启动Vs2017

    日常开发中有些项目工程需要按照Administrator 身份进行启动,我们的操作是在vs2017 上右键,administrator 身份启动. 如下图: 但是这样每次都要右键,移动鼠标进行点击. ...

  5. NodeJS二进制包安装和快捷键配置(适用于U盘版安装配置)

    首先下载NodeJS二进制安装包:https://nodejs.org/dist/v10.15.3/node-v10.15.3-win-x64.zip 在D盘新建NodeJS文件夹,解压node-v1 ...

  6. Window快捷键

    1.带windows 键 Win + E 打开文件夹 Win + R 调出运行命令 Win + T 显示任务栏,并在在其中切换 Win +Pause 显示系统属性 Win + Home 最小化 / 还 ...

  7. ELK-elkstack-使用消息队列

    日志通过logstash收集到redis,之后从logstash从redis读取数据存入到ES 1. logstash使用redis测试 通过标准输入到redis中 logstash配置与启动 [yu ...

  8. Python取整函数

    ceil() 向上取整 返回数字的上入整数,如ceil(4.1) 返回 5 ceil()接受的参数必须是数字类型,可以是True或者False,True(代表1),False(代表0),我试了ceil ...

  9. git使用命令行拉取远程代码仓库中的分支至本地

    1.本地创建文件夹用于存放拉取的代码 2.执行git init初始化文件夹 3.与远程代码仓库建立连接 git remote add origin git@github.com.wuylin/noth ...

  10. 日常训练 dfs 之 拓扑排序

    今天被拓扑排序给折磨了一天,主要就是我的一个代码有点小bug,真难找... 先来看看我今天写的题目吧! C. Fox And Names Fox Ciel is going to publish a ...