浮动和包含框的关系，伪元素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是我们在页面布局中常用的,也是非常重要的一个属性,可以让页面布局变得更加灵活. 但是在继续学习之后,尤其是掌握了宽高自适应之后,我们常常会发现一个奇怪的现象:如果父元素没有设置高度,而子元素 ...
随机推荐
- 鉴于崔庆才大大的对于 beautifulsoup 的再理解
源地址看 soups = BeautifulSoup(html) soup = BeautifulSoup(open('index.html')) print soup.prettify() Tag通 ...
- 关于爬虫的日常复习（9）—— 实战：分析Ajax抓取今日头条接拍美图
- java 储存机制
1.栈 statck 局部变量名称 2.堆 heap 带new的 3.方法区 method area .class
- sqlalchemy 单表增删改查
1.连接数据库,并创建session from sqlalchemy.orm import sessionmaker from sqlalchemy import create_engine engi ...
- C# 自动批量搜索指定关键字，没有注册的域名
做好网站了,部署上线.想注册域名,但是想了很多要注册的,都被别人注册了.例如已经做好了体育资讯的网站,想要包含关键字sport的域名,就可以用这个工具自动完成搜索. 效果如下图: 演示程序结构 在vs ...
- [题解]CSP2019 Solution - Part A
至于为什么是 \(\text{Part A}\) 而不是 \(\text{Day 1}\) 那是因为 Day1 T3 还没改 (那这六题的 \(\text{solution}\) 就按难度顺序写吧) ...
- cocos2dx,Layer锚点与scale缩放
最近写代码需要用到缩放,而且是Layer的,但是发现怎么设置位置都是错误,于是决定研究下. 首先,基础代码,代码上不错特殊处理,没有锚点设置和缩放 class TestLayer : public L ...
- 解决android sdk无法更新 更新慢的问题
使用不同平台开发android应用的时候都要先搭建开发环境. 这里介绍一下搭建开发环境过程中更新和下载android sdk的一种方法: 第一步:配置android sdk manager的代理服务, ...
- Linux下Tomcat,mysql安装包及教程整合，
前段时间孔老师给了一个虚拟机,自己瞎捣鼓,装了Tomcat和mysql,捣鼓了好几天,把一些安装包和试过还不错的博客整理出来: 老师给的已经装好了Linux系统和JDK. Tomcat9安装包 ...
- 调用Excel.Application报错的解决方法
之前由于装了WPS后,VBA和python调用某些OFFICE的端口一直报错.网上找了无数的解决办法.也没有解决. 将注册表清理.不行. 将WPS卸载.不行. 将office重装.不行. 之后找到了个 ...