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

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

<!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. Redis常用命令详细介绍

    一.字符串 字符串键是Redis最基本的键值对类型,将一个单独的键和一个单独的值关联起来.通过字符串键,不仅可以存储和读取字符串,如果输入能被解释为整数和浮点数,还能执行自增或自减操作. 1.SET: ...

  2. doT 这个模板 是怎么实现的？

    之前做过一个微信有关的站 模板用 doT 嗯 这个 用起来很 不错. 但是 它是怎么实现的,想过没有? ps:https://github.com/olado/doT 源码总共 140行. 第90行里 ...

  3. Photoshop 2020安装教程

    首先来看看新增功能 [Photoshop 2020新增功能] 1.ipad和云文档 2.预设改进 3.新对象选择工具 4.转换行为一致 5.改进的属性面板 6.智能对到图层 7.增强的转换变形. 需要 ...

  4. 个人第4次作业：Alpha测试

    这个作业属于哪个课程 课程 这个作业要求在哪里 作业要求 团队名称 CTRL-IKun 一.测试人员个人信息 姓名 王川 学号 201731021132 所在团队 CTRL-IKun 二.测试情况及结 ...

  5. robotframework，移动端（小程序）自动化，获取元素属性值的方法

    如下图,获取商品价格 属性值显示在content-desc内 传统的get text指定是无法获得到这个元素指定属性的值的 只有通过使用AppiumLibrary.get element attrib ...

  6. （初学JS）JS基础——ATM机终端程序编写<1.0>

    初步学习了JS基础,为了更好地将所学知识熟练运用,我进行了银行ATM存取款机的模拟程序编写,主要通过VScode终端实现系列操作. 我的ATM程序包括6个主要功能:1.查询余额 2.存钱 3. 取钱 ...

  7. object-c中的int NSInteger NSUInteger NSNumber辨析

    object-c中的int NSInteger NSUInteger NSNumber辨析 #import <Foundation/Foundation.h> int main(int a ...

  8. 从头学pytorch(二十二):全连接网络dense net

    DenseNet 论文传送门,这篇论文是CVPR 2017的最佳论文. resnet一文里说了,resnet是具有里程碑意义的.densenet就是受resnet的启发提出的模型. resnet中是把 ...

  9. Linux下启动/关闭Oracle

    一.Linux下启动Oracle Linux下启动Oracle分为两步: 1)启动监听: 2)启动数据库实例: 1.登录服务器,切换到oracle用户,或者以oracle用户登录 [admin@dat ...

  10. 项目SpringMVC+Spring+Mybatis 整合环境搭建(2)-> 测试Spring+Mybatis 环境

    测试前期准备 第一步:创建easybuy数据库,设置utf-8格式 第二步:创建表test_tb CREATE TABLE `test_tb` ( `id` int(11) NOT NULL AUTO ...