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

清除浮动的原因：当我们没有给父元素添加高度时，将里面子元素添加浮动（如：float:left）,这样无法撑大父盒子，造成布局混乱。

清除浮动要注意，要给浮动元素的父元素清除浮动，用clear：both语句；旧时我们经常给父元素添加一个带有clear：both的块级子元素，这种方法给多个盒子清除浮动时，会创造出大量无用块级元素，增加服务器压力，而使用after伪元素添加子元素（转化成块级元素）清除浮动，创造的子元素并不会显示在html树中，有效解决这一问题，并且更加便捷。

没有清除浮动前：

清除浮动：

利用after伪元素选择器清除浮动相关推荐

HTML：利用:after伪元素清除浮动
:after伪元素和:before伪元素分别用于在元素之后和之前添加内容,实际网页开发过程中:after伪元素比较常用,借助:after伪元素一般用于清除浮动,利用伪元素来清除浮动是常规浮动清除的三种 ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
CSS3之伪元素选择器和伪类选择器
伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...
十三、CSS 3新特性详解（一）——属性、结构伪类、伪元素选择器，nth-child与nth-of-type区别，2D rotate，calc函数、滤镜filter、过渡transition
七.CSS3 属性选择器(上) 什么是 CSS3 在 CSS2 的基础上拓展.新增的样式 CSS3 发展现状移动端支持优于 PC 端 CSS3 目前还草案,在不断改进中 CSS3 相对 H5,应用非 ...
Python攻城师的成长————css语法、伪元素选择器（部分）
今日学习目标熟悉并掌握css中各种修改属性的方法. 文章目录今日学习目标学习内容一.伪元素选择器 css操作文本内容选择器优先级二.css修改属性 css修改文字属性 css修改字体属性 ...
【04】HTML5+CSS3：01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换
文章目录 HTML5 第一天一.什么是 `HTML5` 二.`HTML5 ` 新增标签三.多媒体音频标签四.多媒体视频标签五.新增 input 标签六.新增表单属性七.`CSS3 ` 属性 ...
CSS3新增属性——新增选择器（属性选择器、结构伪类选择器、伪元素选择器）
目录 1.属性选择器 2. 结构伪类选择器 nth-child(n) nth-of-type(n): nth-child和nth-of-type的区别 3. 伪元素选择器 1.属性选择器 E[att ...
015_CSS伪元素选择器
1. 伪元素选择器是通过双冒号(::)加上特定的具有某种含义的单词来确定所选元素. 2. 伪元素/伪对象: 不存在在DOM文档中, 是虚拟的元素, 是创建的新元素.这个新元素(伪元素)是某个元素的子元 ...
CSS_03_04_CSS伪元素选择器
第01步:编写css代码:wei.css @charset "utf-8"; /* 伪元素选择器:状态效果顺序:L V H A */a:link.lin_01{/*超链接,未访问 ...

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

利用after伪元素选择器清除浮动相关推荐

最新文章

热门文章