CSS 用伪类 :after 选择器清除浮动

最新推荐文章于 2023-07-21 11:17:54 发布

weixin_30412167

最新推荐文章于 2023-07-21 11:17:54 发布

阅读量230

点赞数

原文链接：http://www.cnblogs.com/zion0707/p/3889345.html

版权

利用 :after 伪类来实现清除浮动

<!doctype html>

<head>

</head>

<style>

*{padding:0px;margin:0px;}

ul,li{list-style:none;}

.nav li{float:left;}

.test{height:100px;width:100px;background:orange;}

/* 重点是下面这代码 */

.nav:after{content:"";clear:both;height:0;display:block;}

</style>

<body>

</div>

</body>

</html>

转载于:https://www.cnblogs.com/zion0707/p/3889345.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30412167

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

父元素的高度为0利用伪元素:after清除浮动可解决问题

09-25

`:after`伪元素是CSS中的一个特殊选择器，它可以在任何元素的末尾添加内容，而无需在HTML中实际添加任何额外的元素。通过将`:after`伪元素的`content`属性设置为空字符串（`content:""`），然后将其`display`属性...

css清除浮动clearfix:after的用法详解（附完整代码）

09-25

`:after`伪元素是CSS中的一种特殊选择器，它用于在元素的内容之后插入内容。在清除浮动的上下文中，`:after`伪元素通常被用来在元素内部添加一个看不见的块级元素，以此来清除浮动并使父元素重新包含所有的子元素。 ...

参与评论您还未登录，请先登录后发表或查看评论

清除浮动的原理和方法

clare504的专栏

09-24

9324

浮动元素容器的clearing问题 1. 问题的由来有这样一种情形：在一个容器（container）中，有两个浮动的子元素。在浏览器中一运行，就会出现意想不到的结果。实际视图是子元素显示在父容器的外部。 2. 问题的原因与浮动定位有关。在CSS规范中，浮动定位不属于正常的页面流（page flow），是独立定位的。所以，只含有浮动元素

html伪类清除浮动,伪类选择器、清除浮动

weixin_30523989的博客

06-15

383

2018.7.221.伪类选择器(昨天查的a:hover就是锚伪类)CSS 伪类用于向某些选择器添加特殊的效果。(折角、抬头、箭头)锚伪类就是在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：已被访问状态，未被访问状态，鼠标悬停状态、活动状态(选定)。a:link{color: #FF0000}/* 未访问的链接 */a:visited{color: #00FF00}/...

CSS 学习笔记（清除浮动~a标签的伪类选择器）

dawanhjiao的博客

11-24

502

2.9.5overflow:hidden; 清除浮动 1.可以将超出标签范围的内容裁减掉 2.清除浮动 .head{ background-color: sandybrown; overflow: hidden;/*给第1个大盒子添加这个属性*/ } 3.给外面的大盒子设置overflow: hidden;属性后，里面的小盒子再设置...

伪类选择器、元素浮动与浮动的消除

amzon1222的博客

11-01

280

浮动、浮动清除、伪类选择器

清除浮动（伪元素选择器法）

jwz934738949的博客

05-03

818

在学习了伪元素选择器后，我们可以通过使用伪元素选择器来清除浮动。具体方法为：内容为空；元素为块级元素；高度为0；隐藏元素；添加clear: both属性。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>标题</title>...

css中伪类:after的用法(三种方式)

09-25

`:after`伪类的用途广泛，包括但不限于创建装饰性的尾部标记、插入版权信息、构建无HTML的分隔线、模拟浮动元素的清除等。通过巧妙地利用`:after`，开发者可以增强页面的视觉效果和用户体验，同时保持HTML的简洁性。...

[CSS] 用伪元素:after实现分割线和气泡

05-31

总的来说，`:after`伪元素是CSS中一个强大且灵活的工具，它不仅限于创建分割线和气泡，还可以用于制作各种复杂的设计，如清除浮动、添加版权信息、构建自定义布局等。熟练掌握`:after`的使用，对于提升网页设计和...

JS中使用 after 伪类清除浮动实例

10-20

为了解决这个问题，可以使用CSS的伪类选择器`:after`来清除浮动，这种方法不仅避免了不必要的HTML标签，而且也更符合语义化和结构化的原则。具体来说，`:after`伪类允许你在元素内容的最后添加生成的内容，并可以...

利用after伪元素选择器清除浮动

wsj2311161832的博客

01-24

2803

清除浮动的原因：当我们没有给父元素添加高度时，将里面子元素添加浮动（如：float:left）,这样无法撑大父盒子，造成布局混乱。 清除浮动要注意，要给浮动元素的父元素清除浮动，用clear：both语句；旧时我们经常给父元素添加一个带有clear：both的块级子元素，这种方法给多个盒子清除浮动时，会创造出大量无用块级元素，增加服务器压力，而使用after伪元素添加子元素（转化成块级元素）清除浮动，创造的子元素并不会显示在html树中，有效解决这一问题，并且更加便捷。 ...

使用after伪类-清除浮动

weixin_45786214的博客

05-08

2066

清除浮动解决了什么问题？父元素因为子元素的浮动而高度撑不起来的问题？比如：外面父盒子设置一个红色的边框，两个子盒子分别为蓝色和黑色。父元素没有设置高度。正常应该是这样：如果给两个子盒子设置了浮动的话就会变成这样：父盒子的高度就会变为零不会被撑开。这个时候就需要清除浮动了，方法是使用after伪元素清除浮动。即给父盒子天津爱如下样式： .box1::after{ content: ''; display: block; clear: both; } 这样父盒子的高度

HTML，CSS3利用伪类清除浮动的解决方法

flionn的博客

07-17

6172

.clearfix:after { content:"."; clear: both; height: 0; overflow: hidden; visibility: hidden; display: block; } .clearfix { zoom: 1;} 利用css3伪类：after在应用clearfix的元素的结尾添加content中的内容，添加了一个句号"."，并且把...

CSS3-利用after清浮动

AsaZyf的博客

10-08

1518

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .header{ width:

伪类选择器：爱恨法则；伪元素选择器：before，after；清除浮动

Chenxiaoxuget的博客

12-20

778

伪类选择器：爱恨法则 link：超链接未访问时的状态 visited:超链接访问过后的状态 hover：鼠标悬停时的状态 active：激活时的状态（一般为鼠标按下时）这四个连用时，需要按照顺序，即love hate：爱恨法则 a:link{ color:red; } a:visited{ color:blue; } /*上面两种一般只能用在a元素上*/ a:hover{ color:green; } /*hover基本所有元素都可以使用*/ a:active{ color:black; } /*acti

CSS学习（05结构伪类选择器 浮动及清除）

缘友一世的博客

02-14

520

一结构伪类选择器 1.1 作用与优势： 1.2 选择器 1.3 n的注意点二伪元素 2.1 区别： 2.2 种类： 2.3 注意点：三标准流四浮动 4.1 浮动的产生 4.2 浮动的作用 4.3 浮动的代码 4.4 浮动的特点 4.5 （案例）网页布局案例 4.6 （案例）小米模块案例 4.7 （案例）网页导航案例五 清除浮动 5.1 清除浮动的介绍 5.2 清除浮动的方法 — ① 直接设置父元素高度 5.2 清除浮动的方法 — ② 额外标签法 5.3 清除浮动的方法 — ③ 单伪元素清除法

css伪类选择器 清除浮动...