浮动会使元素尽量向左或向右移动，直到碰到包含框或另外一个浮动元素的盒子模型的边缘

包含框并不会改变里面浮动元素的宽高，浮动元素宽高不会限制在包含块以内

<!DOCTYPE html>

 <html>

 <head>

    <style type="text/css">

    * {

            margin:0;

            padding:0;

    }

        .container {

            width:110px;

            height:100px;

            border:1px solid blue;

        }

        .block1 {

            width:500px;

            height:50px;

            border:1px solid red;

            float:right;

        }

    </style>

 </head>

 <body>

     <div class="container">

         <div class="block1"><span>块1</span></div>

     </div>

 </body>

 </html>

　　

上例中，block1会保持500px的宽度，但container并不会移动位置让block1显示完全，container位置不会变，block1超出container部分会绘制到浏览器左侧以外看不到

把float改为left，就可以清晰看到block1超出container边框

但是，浮动元素会尽量使自己绘制在包含框内

以下block2会另起一行，而不是接着block1，因为另起一行会使block2超出包含框少一点

<!DOCTYPE html>

 <html>

 <head>

    <style type="text/css">

    * {

            margin:0;

            padding:0;

    }

        .container {

            width:110px;

            height:100px;

            border:1px solid blue;

        }

        .block1 {

            width:50px;

            height:50px;

            border:1px solid red;

            float:left;

        }

        .block2 {

            width:100px;

            height:50px;

            border:1px solid red;

            float:left;

        }

    </style>

 </head>

 <body>

     <div class="container">

         <div class="block1"><span>块1</span></div>

         <div class="block2"><span>块2</span></div>

     </div>

 </body>

 </html>

　　

块级浮动元素的宽高如果不设置，他们的宽高就由内容决定（类似内联元素），这个跟普通块级元素不一样（普通块级元素宽会充满父元素，高由内容决定）

包含块的高度如果不设置，里面全部是浮动元素的话，因为浮动元素时脱离文档流的，就会出现高度为0的情况，即高度塌陷

比如：

<!DOCTYPE html>

 <html>

 <head>

    <style type="text/css">

    * {

            margin:0;

            padding:0;

    }

        .container {

            border:1px solid blue;

        }

        .block1 {

            width:100px;

            height:50px;

            border:1px solid red;

            float:left;

        }

        .block2 {

            width:100px;

            height:50px;

            border:1px solid red;

            float:left;

        }

    </style>

 </head>

 <body>

     <div class="container">

         <div class="block1"><span>块1</span></div>

         <div class="block2"><span>块2</span></div>

     </div>

 </body>

 </html>

　　

可以在后面加一个div，使用clear清除浮动，撑起包含块

<!DOCTYPE html>

 <html>

 <head>

    <style type="text/css">

    * {

            margin:0;

            padding:0;

    }

        .container {

            border:1px solid blue;

        }

        .block1 {

            width:100px;

            height:50px;

            border:1px solid red;

            float:left;

        }

        .block2 {

            width:100px;

            height:50px;

            border:1px solid red;

            float:left;

        }

        .block3{

            clear: both;

        }

    </style>

 </head>

 <body>

     <div class="container">

         <div class="block1"><span>块1</span></div>

         <div class="block2"><span>块2</span></div>

         <div class="block3"><span></span></div>

     </div>

 </body>

 </html>

　　

这种方式比较别扭，一般使用伪元素解决

::after 伪元素在元素最后添加内容（::begin在元素最前面添加内容）

<!DOCTYPE html>

 <html>

 <head>

    <style type="text/css">

    * {

            margin:0;

            padding:0;

    }

        .container {

            border:1px solid blue;

        }

        .block1 {

            width:100px;

            height:50px;

            border:1px solid red;

            float:left;

        }

        .block2 {

            width:100px;

            height:50px;

            border:1px solid red;

            float:left;

        }

        .clearfix::after{

            display: block;

            content: "";

            clear: both;

        }

    </style>

 </head>

 <body>

     <div class="container clearfix">

         <div class="block1"><span>块1</span></div>

         <div class="block2"><span>块2</span></div>

     </div>

 </body>

 </html>

　　

after默认为inline元素，inline元素的clear不起作用，所以要改成block元素
同时还要对after设置内容（content，此处只为清浮动，设置内容为空即可），否则无效

浮动和包含框的关系，伪元素after解决高度塌陷的更多相关文章

  1. after及before伪元素及解决父元素塌陷的几种方法

    一.伪类和伪元素 CSS中伪类和伪元素有很多,也很好用!如果熟练使用的话可以解决很多问题 首先明白什么是伪类:伪类是基于当前元素的状态,而不是元素的id class等静态标志,它是动态变化的,它会在一 ...

  2. 利用伪元素:after清除浮动

    一.代码 html代码 <div class="clearfix"></div> css样式 .clearfix{ zoom:1;/*这个属性是为了兼容IE ...

  3. CSS选择器之伪类选择器（伪元素）

    selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...

  4. Effective前端4：尽可能地使用伪元素

    伪元素是一个好东西,但是很多人都没怎么用,因为他们觉得伪元素太诡异了.其实使用伪元素有很多好处,最大的好处是它可以简化页面的html标签,同时用起来也很方便,善于使用伪元素可以让你的页面更加地简洁优雅 ...

  5. 理解:Before和:After伪元素

    CSS样式表的主要作用是修饰Web页面上的HTML标记,但有时候,为了实现某个效果而往页面里反复添加某个HTML标记很繁琐,或者是显得多余,或者是由于某种原因而做不到.这就是CSS伪元素(Pseudo ...

  6. 如何解决浮动元素高度塌陷---CSS

    解决高度塌陷问题的方法: 方法一. //给父元素添加声明 overflow:hidden; 缺点:回隐藏溢出的元素: 方法二. 在浮动的元素下添加空div标签,并给该元素添加声明: clear:bot ...

  7. css浮动导致的高度塌陷问题及清楚浮动的方法

    浮动很好用,但是用浮动后,当浮动元素的父级元素没有高度时,就会造成高度塌陷,从而影响布局.下面就从一开接触前端时,渐渐发现解决高度塌陷的问题的方式. 一.给浮动元素的父级元素添加固定的高度css[he ...

  8. 浮动引发的高度塌陷问题及其解决方法(BFC相关概念及性质)

    浮动引发的高度塌陷问题 高度塌陷问题的产生 BFC(Block Formatting Context)的引入 元素开启BFC后的特点 开启BFC的元素不会被其他浮动元素所覆盖 开启BFC的元素不会发生 ...

  9. float浮动造成高度塌陷的解决办法

    Float是我们在页面布局中常用的,也是非常重要的一个属性,可以让页面布局变得更加灵活. 但是在继续学习之后,尤其是掌握了宽高自适应之后,我们常常会发现一个奇怪的现象:如果父元素没有设置高度,而子元素 ...

随机推荐

  1. Android栈溢出漏洞利用练习

    在Github上看到一个Linux系统上的栈溢出漏洞利用练习项目: easy-linux-pwn.在原项目基础上,我稍微做了一些改动,将这个项目移植到了Android 9.0系统上: easy-and ...

  2. 手写vue中v-bind:style效果的自定义指令

    自定义指令 什么是自定义指令 以 v- 为前缀,然后加上自己定义好的名字组成的一个指令就是自定义指令.为什么要有自定义指令呢?在有些时候,你仍然需要对普通的DOM元素进行底层的操作,这个时候就可以用到 ...

  3. Java入门 - 语言基础 - 05.基本数据类型

    原文地址:http://www.work100.net/training/java-basic-datatype.html 更多教程:光束云 - 免费课程 基本数据类型 序号 文内章节 视频 1 概述 ...

  4. Java入门 - 高级教程 - 02.集合

    原文地址:http://www.work100.net/training/java-collection.html 更多教程:光束云 - 免费课程 集合 序号 文内章节 视频 1 概述 2 集合接口 ...

  5. [题解][Codeforces]Good Bye 2019 简要题解

    构造题好评,虽然这把崩了 原题解 A 题意 二人游戏,一个人有 \(k_1\) 张牌,另一个人 \(k_2\) 张,满足 \(2\le k_1+k_2=n\le 100\),每张牌上有一个数,保证所有 ...

  6. JPA_映射关联关系

    一:单项多对一的关联关系 例如:订单和客户 1.新创建订单类 package com.atguigu.jpa.helloworld; import javax.persistence.Column; ...

  7. python实例：自动爬取豆瓣读书短评，分析短评内容

    思路: 1.打开书本“更多”短评,复制链接 2.脚本分析链接,通过获取短评数,计算出页码数 3.通过页码数,循环爬取当页短评 4.短评写入到txt文本 5.读取txt文本,处理文本,输出出现频率最高的 ...

  8. [集训]FWT基础练习题

    题意 给出n个长度为20的二进制数和数字k,每次询问给出一个二进制数,问从n个数中挑k个数(不能重复)的按位或能包含询问的组合有多少个.数字均小于等于5E5,1s. 思考 强行算出2^20个答案,再O ...

  9. LXC(LinuX Container)之namespaec和cgroup

    LXC(LinuX Container)之namespaec和cgroup namespace概述 从操作系统级上实现了资源的隔离,它本质上是宿主机上的进程(容器进程),所以资源隔离主要就是指进程资源 ...

  10. java获取本地IP地址集合包括虚拟机的ip

    public static ArrayList<String> getLocalIpAddr() { ArrayList<String> ipList = new ArrayL ...