如何实现前端的DIV浮动

本篇内容主要讲解“ 如何实现前端的DIV浮动”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“ 如何实现前端的DIV浮动”吧!

块级元素可以通过浮动实现左右浮动，目的就是让DIV实现类似表格行和列横竖排，浮动时其他块元素会占用原来位置(对后面元素的产生影响)。后续不想浮动可以清除浮动(清除别人的浮动对我的影响！！！) clear:left right both。

<div style="background-color:red; float:left;"></div>

<div style="background-color:blue; float:left;"></div>

<div style="background-color:green; float:left; "></div>

<div style="background-color:red; float:right; "></div>

<div style="background-color:blue; float:right; "></div>

<div style="background-color:green; float:right; "></div>

<!--TIPS：不希望前面的浮动对后面布局产生影响-->

<div style="width:0px; height:0px; clear:both;"></div>

<div style="background-color:yellow;"></div>

注意：

1、浮动时，设置宽高度以便控制位置，一般还要配合margin！！！

2、DIV本身浮动，内部嵌套DIV也应该浮动！！！

超链接伪类：

A选择器:link{} 正常样式

A选择器:hover{} 悬停样式

A选择器:active{} 点击时样式

A选择器:visited{} 点击后样式，颜色设置不生效清除浏览器缓存即可。

<style>

.a1:link{

color:red;

text-decoration:none;

}

.a1:hover{

font-size:36px;

color:green;

}

.a1:active{

color:blue;

font-size:12px;

}

.a1:visited{

color:gray;

}

</style>

<a href="#">点击右边惊喜</a>

到此，相信大家对“ 如何实现前端的DIV浮动”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！