前端开发_HTML5_盒子浮动以及相关问题(float)

最新推荐文章于 2024-07-24 16:53:23 发布

魔笛手7

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量2.6k

点赞数 3

分类专栏：前端文章标签： html5 html css 盒子浮动盒子模型

本文链接：https://blog.csdn.net/u013185175/article/details/121970033

版权

前端专栏收录该内容

75 篇文章 8 订阅

订阅专栏

盒子浮动以及相关问题(float)

1.引入

我们在上一节课中为了解决盒子的左右摆放问题，引入了一个浮动float,其实float是一种比较重要的定位方式，在实现页面元素布局的时候使用的比较广泛，下面我们一起来学习一下有关于盒子模型中的浮动问题。

2.浮动相关属性(flaot)

浮动相关语法以及属性说明:

语法:
    flaot:none | left |right


参数说明:
    left：表示文本或者是图像会移动到父元素的左侧
   right: 表示文本或者是图像会移动到父元素的右侧
    none: 默认值，表示文本或者是图像会现实于它在文档中出现的位置

3.盒子浮动相关属性代码实现以及效果截图

<style type="text/css">
   body {
	  font-size: 25px;
	  font-family: "宋体";
	  color: #ffffff;
   }

   .box1 {
	  background-color: #008000;
	  float: left;
   }

   .box2 {
		margin-left: 300px;
		background-color: #ff0000;
	}
	.box3 {
		background-color: #008000;
		float: left;
	}
	.box4 {
		float: right;
		margin-left: 300px;
		background-color: #ff0000;
	}
	.box5 {
	    margin-top: 200px;
		background-color: #008000;
	}
   .box6 {
	    margin-top: 10px;
		background-color: #ff0000;
	}
    div {
		width: 200px;
		height: 200px;
		border: 1px solid black;
	}
</style>

<body>
	<div class="box1">
	   盒子1
	</div>
	<div class="box2">
	   盒子2
	</div>
	<br>
	<div class="box3">
		盒子3
	</div>
	<div class="box4">
		盒子4
	</div>
		
	<br>
	<div class="box5">
		盒子5
	</div>
	<div class="box6">
		盒子6
	</div>
	</body>

4.盒子浮动存在的盒子塌陷问题以及解决

(1)、塌陷产生的原因

当盒子之间存在包含关系的时候，存在于内部的盒子由于使用了浮动导致外部盒子(父级对象盒子)不能够被撑开，这样浮动的塌陷就产生了。

下面是盒子塌陷代码实现以及效截图

<style type="text/css">
   body{
	    font-size: 25px;
	    font-family: "宋体";
		color: #FF0000;
   }
   .outer{
		width: 500px;
	    height: 500px;
	    border: 1px solid green;
		background-color: #55ff00;
   }
			
   .outer .inner-box1{
	   float: left;
	   width: 300px;
	   height: 300px;
	   background-color: #0055ff;
   }
   .outer .inner-box2{
	   float: right;
	   width: 300px;
	   height: 300px;
	   background-color: #aa5500;
   }
</style>
<body>
   <div class="outer">
	    <div class="inner-box1">
				盒子1
		</div>
		<div class="inner-box2">
				盒子2
		</div>
	</div>
</body>

(2)、浮动塌陷会导致的问题

①、设置的原有背景不能够被正常的现实。

②、由于浮动导致部分区域会超出原有是内容界限，倒是设计的时候样式的混乱。

③、浮动塌陷之后部分属性设置将不会再起到作用，如:padding和margin两个属性。

(3)、解决浮动塌陷的办法

①、对最外层(也就是父级)设置正确的高度，确保里面元素设置了浮动仍然能够容纳。

②、设置对应的both属性

③、添加属性overflow：hidden

如下所示是使用上述三种方式清除了浮动之后的情况以及效果

.outer{
	width: 500px;
	height: 500px;
	border: 1px solid green;
	background-color: #55ff00;
	overflow: hidden;
}

5.盒子内容溢出问题(overflow)

我们在上一个的演示中使用overflow解决了盒子的塌陷问题，那么接下来，我们一起来详细的看一下这一个overflow的相关属性和作用。

(1)、概述: overflow 属性控制对太大而区域无法容纳的内容的处理方式。其属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

(2)、相关属性

overflow 属性可设置以下值：

(1)、visible:默认。溢出没有被剪裁。内容在元素框外渲染

(2)、hidden:溢出被剪裁，其余内容将不可见

(3)、scroll:溢出被剪裁，同时添加滚动条以查看其余内容

(4)、auto:与 scroll 类似，但仅在必要时添加滚动条,就是内容多到无法全部现实的时候就通过使用添加滚动 
     条的形式显示内容。

(3)、overflow 相关属性代码实现以及效果截图

<style type="text/css">
   body {
	  font-size: 25px;
	  font-family: "宋体";
	  color: #FF0000;
   }
   .box1 {
	  height: 100px;
	  width: 300px;
	  border: 1px solid green;
	  overflow:visible;
   }

   .box2 {
	  margin-top: 120px;
	  height: 100px;
	  width: 300px;
	  border: 1px solid black;
	  overflow: hidden;
   }
			
   .box3 {
	  margin-top: 120px;
	  height: 100px;
	  width: 300px;
	  border: 1px solid #55ff00;
	  overflow: scroll;
   }
			
   .box4 {
	  margin-top: 120px;
	  height: 100px;
	  width: 300px;
	  border: 1px solid #55ff00;
	  overflow: auto;
   }
</style>

<body>
   <div class="box1">
		超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件。
   </div>
   <div class="box2">
       超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。
			这些相互关联的信息媒体可能在同一文本中，也可能是其他文件。
   </div>
   <div class="box3">
       超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。
			这些相互关联的信息媒体可能在同一文本中，也可能是其他文件。
   </div>
   <div class="box4">
		    超文本是一种组织信息的方式。
	</div>
</body>

魔笛手7

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端开发_HTML5_盒子浮动以及相关问题(float)

盒子浮动以及相关问题(float)1.引入我们在上一节课中为了解决盒子的左右摆放问题，引入了一个浮动float,其实float是一种比较重要的定位方式，在实现页面元素布局的时候使用的比较广泛，下面我们一起来学习一下有关于盒子模型中的浮动问题。2.浮动相关属性(flaot)浮动相关语法以及属性说明:语法: flaot:none | left |right参数说明: left：表示文本或者是图像会移动到父元素的左侧 right: 表示文本或者是图像会移动到..
复制链接

扫一扫