CSS float 浮动、清除浮动、伪元素和伪类选择器的区别
时间:2018-10-11
本文章向大家介绍CSS float 浮动、清除浮动、伪元素和伪类选择器的区别,需要的朋友可以参考一下
在前面,我们学习了标准文档流,但在实际制作的过程中,用标准文档流书写显然是不现实的,因此,我们来了解几种脱离标准文档流的方法:
1.float 浮动
float:left/right;(左浮/右浮)
效果:元素都加浮动,后面的元素紧跟前面的元素并排排列
第一个加了float,脱离了标准文档流,对于浏览器来说,第二个元素就变成了标准文档流中的第一个,于是就会把他排在第一位。而第一个依然存在,所以就会叠加。
行级加float
A.只要加了float,这个元素就会脱离标准文档流;行级元素加了float,脱离了标准文档流,会变得块不像块,行不像行,能设置快高,能并排排列,则
也不用给行级标签加display了,没有意义。(行级块也是块不像块,行不像行)
B.浮动的元素会贴靠在一起
C.浮动的元素会文字环绕
浮动带来的坏处
1,给元素加了浮动,撑不起父级的高度了
清除浮动
- 给浮动的父元素添加高度
- 给父级添加overflow:hidden;
- 给浮动元素的后面添加一个空的div 添加样式为clear:both
4.给浮动元素的父级添加一个类叫clearfix
这个类写的样式属性有
(伪类选择器:只要选择器后面带:的都可以说是伪类选择器
超链接<a></a>的四种状态
a:link{} 正常的状态
a:visited{} 访问过后的状态
a:hover{} 鼠标悬浮的状态
a:active{} 激活,鼠标点击时的那一刻的状态
a的四种状态的顺序不能变
伪元素和伪类选择器的区别:
伪元素有两个冒号,如p::after{}
伪类选择器有一个冒号,如p:hover{}
)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例