CSS浮动+伪类实现导航栏下拉功能
前言一、浮动二、伪类三、导航栏下拉案例总结前言
在前端的学习中,浮动和伪类算是使用的较为频繁的属性,我在这篇文章中,将为大家简单介绍一下,并用一个导航栏案例加深学习的印象,仅供参考学习。
一、浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
<style>div {/*设置左浮动*/float: left;width: 100px;height: 100px;background-color: pink;margin: 15px;}</style></head><body><div></div><div></div><div></div></body>
记住:已经浮动的元素在文档流中不占位置,如同背景一样,下面的元素会占据浮动元素的位置,所以记得在最后清除浮动
示例如下:
<style>div {float