清除浮动-:after伪元素法(HTML、CSS)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>清除浮动-:after伪元素法</title><style>.clearfix:after {content: "";display: block;/*  因为上面那个默认为行内元素 所以必须转换为块级元素 */height: 0;clear: both;visibility: hidden;}.clearfix:after {/*     IE6、7专有   特定写法 */*zoom: 1;}.box {width: 800px;border: 1px solid blue;margin: 0 auto;}.damao {float: left;width: 300px;height: 200px;background-color: purple;}.ermao {float: left;width: 200px;height: 200px;background-color: pink;}.footer {height: 200px;background-color: black;}</style>
</head><body><div class="box clearfix"><!-- clearfix也可用其他字符代替 不过上面的必须对应你所选择的字符 --><div class="damao">大毛</div><div class="ermao">二毛</div></div><div class="footer"></div></body></html>

清除浮动-:after伪元素法(HTML、CSS)相关推荐

  1. 清除浮动-双伪元素清除浮动(HTML、CSS)

    清除浮动-双伪元素清除浮动(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta c ...

  2. CSS清除浮动-after伪元素

    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

  3. 【伪类与伪元素】用CSS伪元素(以:before为例)插入图片

    [伪类与伪元素]用CSS伪元素(以:before为例)插入图片 对于一些小图标类型的图片,若使用<img>略微有些麻烦,iconfont是一个不错的选择用起来也相当灵活,但是所需要步骤较为 ...

  4. css空心三角形_(12)把“可以动的盒子”更优雅地展示: “伪元素”妙用 | CSS...

    原创:itsOli @前端一万小时 本文版权归作者所有,未经授权,请勿转载! 本文节选自"语雀"私有付费专栏「前端一万小时 | 从零基础到轻松就业」 1. 如何使用伪元素来清除浮动 ...

  5. html中清除浮动的几种方式,清除浮动的几种方法-关于CSS清除浮动的几种方法

    CSS清除浮动的3种方法,参考: 方法1: #test{clear:both;} #test为浮动元素的下一个兄弟元素 方法2: #test{display:block;zoom:1;overflow ...

  6. CSS浮动/常见网页布局/清除浮动/学成在线案例

    CSS 04 1. 浮动(float) 1.1 传统网页布局的三种方式 网页布局的本质--用 CSS 来摆放盒子. 把盒子摆放到相应位置. CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列 ...

  7. CSS学习(第四天)(浮动,常见网页布局,清除浮动,PS切图)

    CSS浮动 1 浮动 1.1传统网页布局的三种方式 1.2 标准流(普通流/文档流) 1.3 为什么需要浮动? 1.3为什么需要浮动? 1.4什么是浮动? 1.5浮动特性(重难点) 1.6 浮动元素经 ...

  8. Web前端,CSS中的浮动、清除浮动

    前言 持续总结输出中,今天分享的是Web前端,CSS中的浮动.清除浮动.浮动和清除浮动是我们常用的css样式.今天我们就来了解他们. 1.浮动的作用 早期的作用:图文环绕 现在的作用:网页布局 • 场 ...

  9. css浮动(float)及清除浮动的几种实用方法

    CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...

最新文章

  1. relay.build调用关系
  2. Linuxnbsp;JDK1.4卸载与1.6的安装
  3. VS2010中重命名项目
  4. Ten ways to improve the performance of large tables in MySQL--转载
  5. 【PAT乙级】1085 PAT单位排行 (25 分)
  6. css背景图宽度只适应,高度不变
  7. mseloss pytorch_PyTorch 卷积与BatchNorm的融合
  8. jdbc连接Oracle/MySQL数据库进行批量导入操作,如何提高效率???
  9. [五]java函数式编程归约reduce概念原理 stream reduce方法详解 reduce三个参数的reduce方法如何使用...
  10. 中国金融家俱乐部秋季论坛聚焦“自贸区将带来什么”展开论道
  11. python识别简单训练模型_Python-OpenCV —— 物体识别(TrainCascadeClassification)
  12. 报文学习四(LLDP协议)
  13. 自研DCI网络路由交换协议DCIP-白牌交换机时代的企业网络
  14. 外边框HTML代码,HTML代码-边框篇
  15. 操作系统期末大题类型题解
  16. 马未都说收藏:陶瓷篇(8、9)元青花、永宣青花
  17. VtigerCRM 点击拨号和来电弹屏 PBX Manager Module
  18. 军工品质32位超低功耗MCU
  19. fastposter v2.6.2 发布 程序员专属海报生成器
  20. 数据运营-计算留存率和转化率(漏斗分析Python)

热门文章

  1. FreeMarker语言概述(1)
  2. c++ builder xe2 字符串转日期
  3. 将centos字符编码换成utf-8
  4. [原创]网站HTML,XHTML,XML,WML,CSS等测试验证工具介绍
  5. Linux系统安全概述-sudo授权-pam认证机制-对称加密-非对称加密-md5-数字证书
  6. Zabbix动态监控磁盘I/O
  7. Linux添加/删除用户和用户组(linux中,添加cvs用户,实质就是添加linux用户。)
  8. ブランド (brand) 品牌,商标
  9. 【Sqoop】Sqoop job实现增量导入的原理
  10. 【Oracle】权限