清除浮动-:after伪元素法(HTML、CSS)
清除浮动-: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)相关推荐
- 清除浮动-双伪元素清除浮动(HTML、CSS)
清除浮动-双伪元素清除浮动(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta c ...
- CSS清除浮动-after伪元素
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 【伪类与伪元素】用CSS伪元素(以:before为例)插入图片
[伪类与伪元素]用CSS伪元素(以:before为例)插入图片 对于一些小图标类型的图片,若使用<img>略微有些麻烦,iconfont是一个不错的选择用起来也相当灵活,但是所需要步骤较为 ...
- css空心三角形_(12)把“可以动的盒子”更优雅地展示: “伪元素”妙用 | CSS...
原创:itsOli @前端一万小时 本文版权归作者所有,未经授权,请勿转载! 本文节选自"语雀"私有付费专栏「前端一万小时 | 从零基础到轻松就业」 1. 如何使用伪元素来清除浮动 ...
- html中清除浮动的几种方式,清除浮动的几种方法-关于CSS清除浮动的几种方法
CSS清除浮动的3种方法,参考: 方法1: #test{clear:both;} #test为浮动元素的下一个兄弟元素 方法2: #test{display:block;zoom:1;overflow ...
- CSS浮动/常见网页布局/清除浮动/学成在线案例
CSS 04 1. 浮动(float) 1.1 传统网页布局的三种方式 网页布局的本质--用 CSS 来摆放盒子. 把盒子摆放到相应位置. CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列 ...
- CSS学习(第四天)(浮动,常见网页布局,清除浮动,PS切图)
CSS浮动 1 浮动 1.1传统网页布局的三种方式 1.2 标准流(普通流/文档流) 1.3 为什么需要浮动? 1.3为什么需要浮动? 1.4什么是浮动? 1.5浮动特性(重难点) 1.6 浮动元素经 ...
- Web前端,CSS中的浮动、清除浮动
前言 持续总结输出中,今天分享的是Web前端,CSS中的浮动.清除浮动.浮动和清除浮动是我们常用的css样式.今天我们就来了解他们. 1.浮动的作用 早期的作用:图文环绕 现在的作用:网页布局 • 场 ...
- css浮动(float)及清除浮动的几种实用方法
CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...
最新文章
- relay.build调用关系
- Linuxnbsp;JDK1.4卸载与1.6的安装
- VS2010中重命名项目
- Ten ways to improve the performance of large tables in MySQL--转载
- 【PAT乙级】1085 PAT单位排行 (25 分)
- css背景图宽度只适应,高度不变
- mseloss pytorch_PyTorch 卷积与BatchNorm的融合
- jdbc连接Oracle/MySQL数据库进行批量导入操作,如何提高效率???
- [五]java函数式编程归约reduce概念原理 stream reduce方法详解 reduce三个参数的reduce方法如何使用...
- 中国金融家俱乐部秋季论坛聚焦“自贸区将带来什么”展开论道
- python识别简单训练模型_Python-OpenCV —— 物体识别(TrainCascadeClassification)
- 报文学习四(LLDP协议)
- 自研DCI网络路由交换协议DCIP-白牌交换机时代的企业网络
- 外边框HTML代码,HTML代码-边框篇
- 操作系统期末大题类型题解
- 马未都说收藏:陶瓷篇(8、9)元青花、永宣青花
- VtigerCRM 点击拨号和来电弹屏 PBX Manager Module
- 军工品质32位超低功耗MCU
- fastposter v2.6.2 发布 程序员专属海报生成器
- 数据运营-计算留存率和转化率(漏斗分析Python)
热门文章
- FreeMarker语言概述(1)
- c++ builder xe2 字符串转日期
- 将centos字符编码换成utf-8
- [原创]网站HTML,XHTML,XML,WML,CSS等测试验证工具介绍
- Linux系统安全概述-sudo授权-pam认证机制-对称加密-非对称加密-md5-数字证书
- Zabbix动态监控磁盘I/O
- Linux添加/删除用户和用户组(linux中,添加cvs用户,实质就是添加linux用户。)
- ブランド (brand) 品牌,商标
- 【Sqoop】Sqoop job实现增量导入的原理
- 【Oracle】权限