<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>66-清除浮动方式二</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
border: 1px solid #000;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
clear: both;
margin-top: 28px;
}
.box1 p{
width: 100px;
background-color: blue;
}
.box2 p{
width: 100px;
background-color: yellow;
}
p{
float: left;
}
/*
.dd{
width: 500px;
height: 500px;
background-color: red;
border: 1px solid #000;
}
.ddd{
width: 200px;
height: 200px;
background-color: blue;
margin-top: 100px;
}
*/
</style>
</head>
<body>
<!--
1.清除浮动的第二种方式
给后面的盒子添加clear属性 clear属性取值:
none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)
left: 不要找前面的左浮动元素
right: 不要找前面的右浮动元素
both: 不要找前面的左浮动元素和右浮动元素 注意点:
当我们给某个元素添加clear属性之后, 那么这个属性的margin属性就会失效
--> <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="dd">
<div class="ddd"></div>
</div>
-->
</body>
</html>

随机推荐

  1. Definition Questions

    What is the relationship and differences between processes and threads? A process usually represent ...

  2. HDOJ(HDU) 1976 Software Version(简单判断)

    Problem Description 相信大家一定有过在网上下载软件而碰到多个不同版本的情况. 一般来说,软件的版本号由三个部分组成,主版本号(Major Version Number),子版本号( ...

  3. Spring mvc登录拦截器

    自己实现的第一个Spring mvc登录拦截器 题目要求:拒绝未登录用户进入系统,只要发现用户未登录,则将用户请求转发到/login.do要求用户登录 实现步骤: 1.在spring的配置文件中添加登 ...

  4. 蓝桥杯 牌型种数 DFS

    牌型种数 小明被劫持到X赌城,被迫与其他3人玩牌. 一副扑克牌(去掉大小王牌,共52张),均匀发给4个人,每个人13张. 这时,小明脑子里突然冒出一个问题: 如果不考虑花色,只考虑点数,也不考虑自己得 ...

  5. Zookeeper集群为什么要是单数

    (原) 在zookeeper集群中,会有三种角色,leader. follower. observer分别对应着总统.议员.观察者. 半数以上投票通过:可以这样理解.客户端的增删改操作无论访问到了哪台 ...

  6. sqlserver 删除表中 指定字符串

    源表T "单据编号"               "航班计划日期"        "航班号"          "起飞航站代码&q ...

  7. Learning-Python【21】:Python常用模块(4)—— re、logging、hashlib、subprocess

    re 模块:与正则相关的模块 在使用 re 模块之前,需要先了解正则表达式(regular expression),描述了一种字符串匹配的模式(pattern),可以用来检查一个字符串是否含有某个子字 ...

  8. Maven工程打成一个jar包

    1:maven-shade-plugin 插件 <plugin> <groupId>org.apache.maven.plugins</groupId> <a ...

  9. JQuery攻略(六)菜单导航

    jQuery菜单导航的基础应用 此章节有 1.0 页面导航 1.01面包屑菜单 1.02菜单悬停 1.03菜单快捷键 1.04两个单独的菜单 1.05折叠菜单 1.01面包屑菜单 html <b ...

  10. Grafana关键词

    The open platform for beautiful analytics and monitoring. data source.panels.apps.dashboards. Organi ...