<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
   .box1{
       /*height: 200px; 嵌套盒子的父亲不方便给高度  */
       width: 600px;
       background-color: pink;

       overflow: hidden;

   }
   .clearfix:after{
       content: "";
       display: block;   /*转化为块级元素*/
       height: 0px;
       visibility: hidden;
   /*    隐藏盒子*/
   }
        .box2{
            width: 600px;
            height: 240px;
            background-color: purple;
        }
        .son1{
           width: 150px;
            height: 100px;
            background-color: skyblue;
            float: left;
        }
        .son2{
            width: 300px;
            height:100px ;
            background-color: hotpink;
            float: left;
        }
        /*.clear{*/
        /*    clear: both;*/
        /*}*/
        .clearfix:after {
            clear: both;
        }
        .clearfix{
            *zoom:1;
        }
    </style>
    <title>Title</title>
</head>
<body>
<div class="box1 clearfix">
    <div class="son1"></div>
    <div class="son2"></div>
<!--   额外标签法 在浮动盒子后面加一个空盒子  优点比较简洁  缺点结构化不严谨-->
<!--  <div class="clear"></div>-->
</div>
<div class="box2"></div>
</body>
</html>

												


											
css4——浮动的更多相关文章
	

    
								
  1. CSS float 浮动属性
		
    本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
    
		
    2. 
						
  2. CSS浮动、定位
		
    这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...
    
		
    3. 
						
  3. css中的浮动与三种清除浮动的方法
		
    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...
    
		
    4. 
						
  4. CSS三个定位——常规、浮动、绝对定位
		
    .dage { width: 868px; background: #5B8C75; border: 10px solid #A08C5A; margin-top: -125px; margin-le ...
    
		
    5. 
						
  5. float---浮动带来的影响与清除浮动带来的影响方法----在路上（20）
		
    使用float会带来哪些影响: 脱标:无行级块级之分: 相互贴靠:若想之间有空隙可用margin与padding: 顶边对齐: 文字环绕: 当使用float后,子标签脱离父标签,父标签就会失去高度,此 ...
    
		
    6. 
						
  6. 【Win 10应用开发】自定义浮动层——Flyout
		
    最近几天总是下雨,真是“何处秋窗无雨声”,也“不知风雨几时休”. 好,进入正题. 弹出层有三种. 第一种是ContentDialog,即内容对话框,它其实类似于模态对话框,弹出后会覆盖整个窗口区域,并 ...
    
		
    7. 
						
  7. CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法
		
    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...
    
		
    8. 
						
  8. 前端开发：css基础知识之盒模型以及浮动布局。
		
    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...
    
		
    9. 
						
  9. 浮动清除、before&after
		
    ::before 和 ::after属于伪元素,而 :before 和 :after属于伪类(CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号)因此如果使用了 display 或者 width 等 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. CSPS模拟99
			
    555我原型笔录 T1 不会线段树维护单调栈被dalao们踩爆 T2 我要实现这样一个东西: 已知a,b,c,使a=a-b,b=b-c 结果我把代码弄成这样: b=b-c;a=a-b; 然后就被dal ...
    
			
    2. 
						
  2. NOIP模拟 19
			
    最近试考的脑壳疼 晚上还有一场555 T1 count 研究性质题. 研究好了AC,研究不明白就没头绪 首先枚举n的因子d 其次发现因为是树,所以如果合法,贡献只能是1 然后发现如果合法,一定是一棵一 ...
    
			
    3. 
						
  3. Hive数据仓库你了解了吗
			
    在工作中我们经常使用的数据库,数据库一般存放的我们系统中常用的数据,一般为百万级别.如果数据量庞大,达到千万级.亿级又需要对他们进行关联运算,该怎么办呢? 前面我们已经介绍了HDFS和MapReduc ...
    
			
    4. 
						
  4. NOI导刊总结
			
    NOI导刊总结 前两天去郑州,参加了什么NOI导刊的培训,然后就发现大佬是真的多,还十分意外的发现了一个事,清华北大是不是发笔记本和耳机,为啥三个老师的都一模一样... 这几天主要以讲.NOIP知识点 ...
    
			
    5. 
						
  5. LoadRunner具体流程
			
    创建负载测试场景场景目标:模拟10个用户同时登陆.搜索航班.购买机票.查看航班路线并退出打开Controller并创建一个新场景1.打开HP LoadRunner2.打开Controller在Load ...
    
			
    6. 
						
  6. hdu 1754 I Hate It (线段树、单点更新)（PS：ios::sync_with_stdio(false)可以加快cin、cout的读取写出速度）
			
    I Hate ItTime Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...
    
			
    7. 
						
  7. nyoj 55-懒省事的小明(priority_queue)
			
    55-懒省事的小明 内存限制:64MB 时间限制:3000ms Special Judge: No accepted:8 submit:62 题目描述:       小明很想吃果子,正好果园果子熟了. ...
    
			
    8. 
						
  8. .NET Core 3 WPF MVVM框架 Prism系列之数据绑定
			
    一.安装Prism 1.使用程序包管理控制台 Install-Package Prism.Unity -Version 7.2.0.1367 也可以去掉‘-Version 7.2.0.1367’获取最 ...
    
			
    9. 
						
  9. 力扣（LeetCode）2的幂 个人题解
			
    给定一个整数,编写一个函数来判断它是否是 2 的幂次方. 示例 1: 输入: 1 输出: true 解释: 20 = 1 示例 2: 输入: 16 输出: true 解释: 24 = 16 示这题是考 ...
    
			
    10. 
						
  10. PL真有意思（一）：引言
			
    前言 断断续续学编译原理到之前发过写一个编译器和正则表达式引擎系列文章也有一段时间了,然后最近看完PLP这本书,这本书应该算是入门书,但是对我这种半吊子收获很大.所以为了弥补最近学操作系统和接外包摸的 ...
    
			
    11.