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

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

<!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. java 方法定义 调用

    一.定义 格式: 修饰符 返回值类型 方法名(参数){ return } 相比之下python方法的定义简单多了 public static 是修饰符 二.调用 方法名(); 注意:要在main方法中 ...

  2. Mysql 8+ 版本完全踩坑记录

    问题是这样 刚霍霍了一台腾讯云服务器需要安装mysql 然后就选择了8+这个版本. 安装步骤网上有的是. 我只写最主要的部分 绝对不出错 外网可访问 .net java都可以调用 其实不指望有人看 就 ...

  3. Spring Cloud学习之-什么是Spring Cloud？

    SpringCloud 什么是微服务? 要想学习微服务,首先需要知道什么是微服务?为什么会有微服务?相信看完架构的发展史读者就会明白 架构发展史 单体应用架构 如图所示:将所有的模块,所有内容(页面. ...

  4. 【java面试】数据库篇

    1.SQL语句分为哪几种? SQL语句主要可以划分为以下几类: DDL(Data Definition Language):数据定义语言,定义对数据库对象(库.表.列.索引)的操作. 包括:CREAT ...

  5. 对于Makefile的基本使用

    上课不听讲的后果就是课下疯狂补知识了 原文来自https://www.cnblogs.com/chenguanfu/p/4415072.html 在Windows下,只需要简单的点击以下make,re ...

  6. sqli_labs学习笔记（一）Less-38~Less-53

    续上,开门见山 堆叠注入,实际上就构成了两条SQL语句 http://43.247.91.228:84/Less-38/?id=1' union select 1,2,3 --+    //未报错 h ...

  7. AI初探

    看东西应该记笔记,不然如过眼云烟,如只逛商场,不买东西,不留下带走什么,就是浪费时间,没有收获,仅此开始,定期梳理看过的东西. 人工智能的目的是什么呢? 答:让机器表现得更像人类,甚至在某些技能上超越 ...

  8. Python PID

    import time class PID: """PID Controller """ def __init__(self, P=0.2, ...

  9. hash算法与拉链法解决冲突

    <?php class HashNode { public $key; public $value; public $nextNode; public function __construct( ...

  10. 导出表格数据到excel并下载(HSSFWorkbook版)

    这里主要前面是通过一个全局变量,在layui的done回调里拿到数据,然后将该数据导出到excel,这里要注意一点,下载excel不能用ajax方式,如果采用ajax下载默认会读取response返回 ...