CSS样式设置网页的浮动布局 设置浮动 清除浮动 溢出处理

鳄鱼君

发表文章数:642

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » CSS » CSS样式设置网页的浮动布局 设置浮动 清除浮动 溢出处理

这篇文章就来介绍一下网页的浮动和定位,这通常是网页设计的重点内容。在此之前需要了解一些基本的知识:

1.文档流
① 按照页面元素的书写顺序,将页面元素按照从左到右,从上至下的一半顺序进行排列。
② 如果想要实现更丰富的效果,就需要脱离文档流,在一个新的平面上去显示,即可在屏幕上有多个平面叠加显示的效果了!
2.定位
① 定位允许使用position属性,将一个元素相对于他自己或者他的祖先元素甚至是浏览器窗口通过top、left、right、bottom属性进行偏移。
②根据position属性的取值,元素可以分为:
—-静态定位元素static(默认值)
—-相对定位元素relative
—-绝对定位元素absoute

③ 当使用定位时,需要position属性和top、left、right、bottom这两类属性共同参与来决定一个元素的定位类型和偏移量。
3.定位元素之间的区别
① relative相对定位
元素根据其在当前文档流所在位置作为参考系,进行偏移。定位之后原来元素在文档流中的位置被空出来,不会被其他元素占据。
② absolute绝对定位
元素会将其带有position为非static的祖先元素作为参考系进行偏移。如果祖先元素里没有带position为非static的,则会以首屏作为参考系。定位之后,原来在文档流中占据的位置,会被其他元素所占据。
③ fixed固定定位
根据当前可视区域进行定位,当文档流为多屏可滚动时,fixed定位的元素会跟对滚动而滚动。跟absolute定位一样,定位后,原来在文档流中占据的位置,会被其他元素所占据。

设置浮动

前面的内容只是铺垫,现在再来说说什么是浮动?浮动允许将元素浮动起来,脱离文档流向左或者向右移动,直到他的外边缘碰到包含框或另一个浮动框的边框为止。它的基本语法格式为:CSS选择器{float:属性值;},属性值可以为left(元素向左浮动)、right(元素向右浮动)、none(元素不浮动,默认值)。

浮动与定位不同的是inline和inline-block的元素可以识别这种因浮动而脱离的文档流,从而不发生重叠!

 <style type="text/css">
    	.a1,.a2,.a3{
    		width: 300px;
    		height: 200px;
    	}
    	.a1{
    		background-color: blue;
    		float: left;
    	}
    	.a2{
    		background-color: yellow;
    		float: left;
    	}
    	.a3{
    		background-color: red;
    		float: left;
    	}
    </style>
<div class="a1">a1</div>
<div class="a2">a2</div>
<div class="a3">a3</div>

浮动的规则比较乱,我们可以简单知道以下浮动的规则:

  • 浮动元素会从最后一行最左侧的空白位置开始浮动。
  • 如当前行无法容纳下自己的宽度,则垂直下沉到下一行,向左或者向右碰到包含框或另一个浮动框的边框为止。

清除浮动

简单来说浮动就是用float属性来设置,那么知道了浮动,就需要知道如何清除浮动,那么为什么需要清楚浮动呢?

1.由于浮动元素会脱离文档流显示,所以在浮动元素后面的块级元素会默认占据这些元素的位置,就会造成这些块级元素会浮动在元素的下层显示,出现浮动元素盖住后面正常文档流元素的效果,但这往往不是我们想要的结果。
2.其作用是改变使用用清楚浮动的这个元素与前一个声明浮动的元素之间默认布局规则,让使用清楚浮动的这个元素在新的一行显示。
清除浮动的特殊应用:
1.可以解决父元素高度塌陷问题。当一个元素包裹了一些float元素的时候,由于float元素脱离文档流显示,所以父元素无法被这些元素撑开高度,导致父元素高度为0.
2.最常用的一种解决方案是:设置父元素的after伪元素的clear属性来让其撑开父元素的高度。

清除浮动使用clear属性,它的基本语法格式为:选择器{clear:属性值;},其属性值为left(不允许左侧有浮动元素,清除左侧浮动的影响)、right(不允许右侧有浮动元素,清除右侧浮动的影响)、both(同时清楚左右两侧浮动的影响)。浮动元素或者非浮动元素的块级元素都可以都可以使用这个属性来清除浮动(之前讲过inline和inline-block元素可以自动识别浮动,所以他们不需要清楚浮动)。那么使用clear属性的元素会在浮动元素的下方新开一行显示。

对于特殊的浮动,需要使用其它的方法,那么有空标记、overflow、after伪对象三种方式。

  • 空标记:在浮动元素之后添加空标记,并对该标记应用“clear:both”样式,可以清除浮动。这个空标记为<div>、<p>、<hr>等任何标记。
  • 对父元素使用overflow:hidden样式,也可以清除浮动对该元素的影响,该方法弥补了空标记清除浮动的不足。
  • 对父元素使用after伪对象也可以清除浮动,但是该方法只适用于IE8以及以上版本浏览器和其他非IE浏览器。
<style type="text/css">
.div1{
    background-color: blue;
    /*width: 1000px;   第一种方式清除浮动
    height: 1000px;*/
    /*overflow: hidden;    第二种方式*/
    }
    /*left和right浮动之后 div1会消失*/
.left{
    width: 300px;
    height: 200px;
    background-color: pink;
    float: left;
}
.right{
    width: 250px;
    height: 190px;
    background-color: red;
    float: left;
} 
/*.div2{
    background-color: yellow;
    clear: left;
    /*clear: both; }  第三种方式*/
.div1:after{
    content: "";
    clear: both;
    display: block;
    }
</style>

<div class="div1">
<div class="left"></div>
<div class="right"></div>
<!--<div class="div2">我是div2</div>-->

溢出处理

当块元素中的内容超出了元素的边界,就会出现溢出的情况,默认情况下内容是不会被修剪的,会呈现在元素框之外。处理溢出使用overflow属性,它的基本语法格式为:CSS选择器{overflow:属性值;},其属性值有四种,分别为visible(默认值,内容不会被修剪,会呈现在元素框之外)、hidden(溢出内容会被修剪,并且被修剪的内容是不可见的)、auto(在需要时产生滚动条,即自适应索要显示的内容)、scroll(溢出内容会被修剪,且浏览器会始终显示滚动条)

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《CSS样式设置网页的浮动布局 设置浮动 清除浮动 溢出处理》 发布于2020-04-17

分享到:
赞(1) 赏杯咖啡

评论 抢沙发

5 + 7 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册