浮动和包含框的关系，伪元素after解决高度塌陷
浮动会使元素尽量向左或向右移动，直到碰到包含框或另外一个浮动元素的盒子模型的边缘
包含框并不会改变里面浮动元素的宽高，浮动元素宽高不会限制在包含块以内
<!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解决高度塌陷的更多相关文章
- after及before伪元素及解决父元素塌陷的几种方法
一.伪类和伪元素 CSS中伪类和伪元素有很多,也很好用!如果熟练使用的话可以解决很多问题 首先明白什么是伪类:伪类是基于当前元素的状态,而不是元素的id class等静态标志,它是动态变化的,它会在一 ...
- 利用伪元素:after清除浮动
一.代码 html代码 <div class="clearfix"></div> css样式 .clearfix{ zoom:1;/*这个属性是为了兼容IE ...
- CSS选择器之伪类选择器（伪元素）
selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...
- Effective前端4：尽可能地使用伪元素
伪元素是一个好东西,但是很多人都没怎么用,因为他们觉得伪元素太诡异了.其实使用伪元素有很多好处,最大的好处是它可以简化页面的html标签,同时用起来也很方便,善于使用伪元素可以让你的页面更加地简洁优雅 ...
- 理解:Before和:After伪元素
CSS样式表的主要作用是修饰Web页面上的HTML标记,但有时候,为了实现某个效果而往页面里反复添加某个HTML标记很繁琐,或者是显得多余,或者是由于某种原因而做不到.这就是CSS伪元素(Pseudo ...
- 如何解决浮动元素高度塌陷---CSS
解决高度塌陷问题的方法: 方法一. //给父元素添加声明 overflow:hidden; 缺点:回隐藏溢出的元素: 方法二. 在浮动的元素下添加空div标签,并给该元素添加声明: clear:bot ...
- css浮动导致的高度塌陷问题及清楚浮动的方法
浮动很好用,但是用浮动后,当浮动元素的父级元素没有高度时,就会造成高度塌陷,从而影响布局.下面就从一开接触前端时,渐渐发现解决高度塌陷的问题的方式. 一.给浮动元素的父级元素添加固定的高度css[he ...
- 浮动引发的高度塌陷问题及其解决方法(BFC相关概念及性质)
浮动引发的高度塌陷问题 高度塌陷问题的产生 BFC(Block Formatting Context)的引入 元素开启BFC后的特点 开启BFC的元素不会被其他浮动元素所覆盖 开启BFC的元素不会发生 ...
- float浮动造成高度塌陷的解决办法
Float是我们在页面布局中常用的,也是非常重要的一个属性,可以让页面布局变得更加灵活. 但是在继续学习之后,尤其是掌握了宽高自适应之后,我们常常会发现一个奇怪的现象:如果父元素没有设置高度,而子元素 ...
随机推荐
- 如何在匿名thread子类中保证线程安全
在做性能测试的过程中,我写了两个虚拟类ThreadLimitTimeCount和ThreadLimitTimesCount做框架,通过对线程的标记来完成超时请求的记录.旧方法如下: @Override ...
- SSM框架整合中，不报错，数据库只能存ID进去问题解决
嗯,这个错误其实不能算错误,是粗心造成的,在配置文件中对于传递的参数没有写#字符,直接写的的属性名.居然错了两次,哎!!! 嗯,还有一个问题,在动态SQL中,if标签中test属性中判断时,不能用大写 ...
- python接口自动化测试 - openpyxl封装类
前言 为了更好的让openpyxl在工作中使用,将openpyxl的常用操作封装起来,这样不仅复用性高,而且阅读性好 直接上代码 #!/usr/bin/env python # -*- coding: ...
- iOS开发tip-图片方向
概述 相信稍微接触过iOS图片相关操作的同学都遇到过图片旋转的问题,另外使用AVFoundation进行拍照的话就会遇到前后摄像头切换mirror问题就让人更摸不着头脑了.今天就简单和大家聊一下iOS ...
- Centos 7 部署lnmp集群架构
前言介绍 lnmp的全程是 linux + nginx + mysql + php; lnmp就是上述系统及应用程序的简写组合: lnmp其实已经代表了一个用户正常对一个页面请求的流程,nginx接收 ...
- Git详解之其他系统结合
前言 世界不是完美的.大多数时候,将所有接触到的项目全部转向 Git 是不可能的.有时我们不得不为某个项目使用其他的版本控制系统(VCS, Version Control System ),其中比较常 ...
- Datagrip 快捷键和常用插件持续更新一集一些使用技巧
快捷键 Ctrl+Enter:执行选中的SQL语句 Ctrl+Shift+左右箭头:调整列宽度(选中行,可以调整所有列的宽度) Ctrl+N / 双击Shift :全局搜索,点击可直接进入表 Ctrl ...
- 深入了解Zookeeper
ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,它包含一个简单的原语集,分布式应用程序可以基于它实现同步服务,配置维护和命名服务等.Zookeeper是hadoop的一个子项目,其 ...
- java设计模式5——适配器模式
java设计模式5--适配器模式 1.结构型模式介绍 1.1.作用 从程序的结构上实现松耦合,从而可以扩大整体的类结构,用来解决更大的问题. 分类: 适配器模式 代理模式 桥接模式 装饰模式 组合模式 ...
- Pycharm创建Django项目显示python non-zero exit code(1)错误
好久时间没有做Django的项目了,今天创建项目竟然报Non-zero exit code(1)错误 查明原因是因为pip不是最新版本,需要执行以下命令:python -m pip install - ...