清除浮动-双伪元素清除浮动（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>清除浮动-双伪元素清除浮动</title><style>.clear::before,.clearfix:after {content: "";display: block;}.clearfix:after {clear: both;}.clearfix {*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"><div class="damao">大毛</div><div class="ermao">二毛</div></div><div class="footer"></div></body></html>

清除浮动-双伪元素清除浮动（HTML、CSS）相关推荐

触发bfc的html元素,什么是BFC？ CSS 使用伪元素清除浮动的方法
BFC概念: 块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响. 我们先了解一个名词:BFC(block formatting co ...
CSS清除浮动-after伪元素
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
css 伪元素和浮动
展示为行内元素 inline-block <style>div {/* 浏览器解析行内块或行内标签的时候, 如果标签换行书写会产生一个空格的距离, 展示为行内元素 */display: i ...
伪类、伪元素及五星好评css实现
1. 伪元素伪元素本质上是创建了一个有内容的虚拟容器 //:before和:after一定要配合content使用: <html> <head><meta charse ...
css改变伪元素color_jQuery教程改变css伪元素样式详解
本篇教程介绍了jQuery教程改变css伪元素样式详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < 首先我们看一下css伪元素是什么: CSS 伪元素用于向某 ...
HTML：利用:after伪元素清除浮动
:after伪元素和:before伪元素分别用于在元素之后和之前添加内容,实际网页开发过程中:after伪元素比较常用,借助:after伪元素一般用于清除浮动,利用伪元素来清除浮动是常规浮动清除的三种 ...
html 伪元素放入标签,CSS中的before和:after伪元素使用详解
如果你一直密切关注着各种网页设计的博客,你可能已经注意到了:before和:after伪元素已经在前端开发中获得了相当多的关注.特别是在Nicolas Gallagher的博客中,后期运用了很多伪类元 ...
html伪元素before占用高度,CSS：伪元素：before和：after从原始元素继承宽度/高度...
我使用css伪元素:之前和:之后给一个缩进效果我的一些网站上的图像.但是,如果不指定宽度和高度,这些将不显示.这将让我为每个图像指定一个固定的宽度和高度,我猜这将适用于一个静态网页. 然而,因为这些图 ...
伪元素写竖线_[CSS] 用伪元素:after实现分割线和气泡
学习前端网页开发并将其应用于工作中已经两个月了,发现前端包括的内容真的是无比丰富,知识量巨大--漫漫长路远,尚需艰苦努力.作为一只前端开发的菜鸟,写不了特别深刻的关于前端技术性文章,只是想将工作中遇到 ...

清除浮动-双伪元素清除浮动（HTML、CSS）

清除浮动-双伪元素清除浮动（HTML、CSS）

清除浮动-双伪元素清除浮动（HTML、CSS）相关推荐

最新文章

热门文章