首页 >web前端 >html教程 >div浮动层与默认的div层有什么关系

div浮动层与默认的div层有什么关系

php中世界最好的语言原创: 2017-11-22 17:45:542101浏览

说到浮动首先我们要清楚一个概念，我们为什么设置浮动样式？因为想让DIV对象盒子实现靠左或靠右布局。这样我们的网页就可以做的更美观，交互性更强，那么浮动的DIV和默认的DIV之间有什么不同呢？我们一起来看一下

div浮动层与div层有何不同css中有什么关系

首先DIV浮动层与DIV层都是指DIV布局，一般使用CSS样式表加DIV标签组合进行布局网页。

div层一般包括div浮动层，div浮动层说明div被加入css浮动样式所以被称为div浮动层，而没有加入float浮动样式不具有浮动效果，所以如果没有被加浮动样式div不被称为浮动层。当然span、h1、ul、li等标签也是层，只不过span、h1、ul、li等标签没有div使用频率高，所以一般就将div作为象征性称呼。

接下来告诉大家什么是一般层，什么是浮动层？为什么要使用div css浮动层。

完整DIV+CSS实例HTML代码如下

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>div层与浮动层</title> 
<style> 
.div{ width:400px; height:100px} 
.div-a{ float:left; border:1px solid #F00; width:100px; height:80px} 
.div-b{ float:right; border:1px solid #00F; width:100px; height:80px} 
</style> 
</head> 
<body> 
<div class="div"> 
<div class="div-a"></div> 
<div class="div-b"></div> 
</div> 
</body> 
</html>

对象".div"没有设置浮动，“.div-a”设置靠左浮动（float:left）,“.div-b”设置靠右浮动（float:right）。

层与浮动层总结

在以上实例中“.div”对象是普通层，而默认是不具有浮动效果的层，因为网页内容是居左的所以看到此层居左，实际是没有浮动样式的一个DIV盒子层。而对象内子级“.div-a”和“.div-b”是设置float浮动所以变成了浮动层，从上可以看出他俩在“.div”盒子内一个靠左浮动一个靠右浮动。普通层与浮动层区别就是在于是否被设置了css float浮动样式。

关于浮动的不同已经给大家介绍的很清楚了，更多精彩请关注php中文网其它相关文章！