温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Web前端入门学习(5)——浮动原理及清除浮动

发布时间:2020-07-18 17:27:46 来源:网络 阅读:883 作者:小倩_小倩 栏目:开发技术

浮动原理及清除浮动

上节回顾

  在上节的《Web前端入门学习(4)—— 块级元素和行内元素之特征与转换》中(http://cherry360.blog.51cto.com/12176744/1863945),介绍了块级元素和行内元素的特征,及粗略介绍了如何进行转换。加上display属性,可以指定元素的类型,如display:block、display:inline,以及display:inline-block。当然用得最多的是最后一个display:inline-block。结合例子来看:

例1:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<style>
    div,span{height:100px;width:100px;background:blue;border:1px solid red;}
</style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <span>span1</span>
    <span>span2</span>
</body>
</html>

显示结果:

Web前端入门学习(5)——浮动原理及清除浮动

例2,如果在css样式中加上display:inline-block,即把CSS样式改成:

div,span{
    height:100px;
    width:100px;
    background:blue;
    border:1px solid red;
    display:inline-block;
}

显示效果将会变成:

Web前端入门学习(5)——浮动原理及清除浮动

Web前端入门学习(5)——浮动原理及清除浮动从上面的对比结果可以看出,属性display:inline-block的效果是,可以把块级元素在同一行内显示,而行内元素也变得支持宽高。但是使用这种方式,也有一些隐患问题,就是换行被解析。也就是说,标签之间换行之后,显示出来的效果中间是存在间隙的,并且不同浏览器之间的间隙大小不一致。此外,IE6、IE7是不支持块级元素的inline-block效果。那么有其他办法可以解决吗?这就是本节需要讨论的问题了。


浮动原理

  任何元素都可以被浮动,浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框位置;由于浮动框不在文档流中,所以文档流中的元素会表现得就像浮动框不存在一样。文档流是文档中可显示对象在排列时所占用的位置。话不多说,看例子最直观:

例3:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<style>
    div,span{height:100px;width:100px;background:blue;border:1px solid red;float:left;}
</style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <span class="span1">span1</span>
    <span class="span2">span2</span>
</body>
</html>

显示结果:

Web前端入门学习(5)——浮动原理及清除浮动

Web前端入门学习(5)——浮动原理及清除浮动本例的结果和例2的结果,代码区别在于把display:inline-block改成float:left,而显示结果的区别是标签换行没有被解析。还有一些特点现在通过肉眼还无法看出来,就是使用float属性的元素会脱离文档流,现在看看下面例子:

例4:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<style>
    .box1{width:100px;height:100px;background:red;float:left;}
    .box2{width:200px;height:200px;background:blue;}
</style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>


显示结果:

Web前端入门学习(5)——浮动原理及清除浮动

Web前端入门学习(5)——浮动原理及清除浮动从例4可以看出,红色块盒子使用了left浮动,而蓝色块盒子没有使用浮动元素,因此红色块脱离了文档流,而蓝色块盒子好像看不到红色块盒子一样,重叠在一起了。


综上所得,总结出浮动元素的几个特征:

  • 内联元素支持宽高;

  • 块元素可以在同行显示;

  • 宽度由内容撑开;

  • 脱离文档流;

  • 提升层级半层。


  了解了浮动原理之后,我们知道使用float属性的元素会脱离文档流,那么其他没有使用浮动属性的元素会看不到它们,从而导致出现重叠这种状况,如何解决呢?那么现在就引入一个清除浮动的知识点了。

  例5:

在例4的代码中,把box2的样式改成:

.box2{ width:200px;height:200px;background:blue;clear:left;}

显示结果:

Web前端入门学习(5)——浮动原理及清除浮动

属性clear把红色块盒子的左浮动清除了,所以蓝色块盒子不再和红色盒子重叠在一起。这里仅是简单介绍清除浮动的办法之一,当然还有很多办法,在此仅作入门了解。

  


 温馨提示Web前端入门学习(5)——浮动原理及清除浮动

          float浮动属性值:left/right/none;

          clear清除浮动属性值:left/right/both/none。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI