ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

13 float属性（重点）

2022-08-04 18:02:49  阅读：188  来源： 互联网

标签：浮动 13 float 盒子 color 元素 height 属性 200px


  1. 浮动的背景
    开始为了web工程师，在网页上实现一些简单的布局。如文字环绕图片现象

  2. 浮动的属性

    • none：表示不浮动，默认值
    • left：左浮动
    • right：右浮动
    • inherit：继承父元素的浮动属性

1 文件环绕效果

文字环绕图片，可设置图片的浮动。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文字环绕</title>
	<link rel="stylesheet" type="text/css" href="CSS/reset.css">
	<style type="text/css">
		.box img{
			float: left;
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="images/11.jpg" width="100">
		<p>在不到一个月之前，也就是今年的5月26号，美国总统拜登对外发布一份正式声明，宣称他已经下令要求美国的情报机构，对新冠疫情的起源展开调查分析，确认这种前所未见的新型病毒究竟是动物宿主感染还是来自于实验室事故，并且还要求美国情报机构提高调查力度，在90天之内形成报告并递交到白宫，而在声明的最后，拜登老调重弹的呼吁那些“志同道合的伙伴们”，一共“敦促”中国参与全面、透明、以证据为基础的国际调查。

		如今距离拜登给出的90天期限已经走完了近三分之一，美国的情报机构们依旧没有更多的收获，眼看着总统设定的最后期限正在逼近，因此美国外交系统开始就病毒溯源向中国下达了最后通牒，而且只给了我们两个选择：要么配合调查，要么被国际孤立。
		</p>
	</div>

</body>
</html>

image


2 浮动元素脱标

脱标：就是脱离了标准文档流

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>浮动现象</title>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			color: #fff;
		}
		div.left{
			background-color: red;
			float: left;
		}
		div.right{
			background-color: green;
		}
	</style>
</head>
<body>
	<div class="left">左边的盒子</div>
	<div class="right">右边的盒子</div>
</body>
</html>

效果：左边的盒子压盖住了右边的盒子

原因1：左边的盒子设置了浮动，右边的盒子没有设置浮动，左边的盒子脱离了标准文档流，其实就是它不在页面中占位置了，此时浏览器认为右边的盒子是标准文档流中的第一个盒子。所以就渲染到了页面中的第一个位置上。这种现象，也有一种叫法，浮动元素“飘起来了”，但我不建议大家这样叫。

原因2：所有的标签一旦设置浮动，就能够并排，并且都不区分行内、块状元素，都能够设置宽高

image


3 浮动元素互相贴靠

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>浮动现象</title>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			color: #fff;
		}
		div.left{
			background-color: red;
			float: left;
		}
		div.right{
			background-color: green;
			float: left;
		}
	</style>
</head>
<body>
	<div class="left">左边的盒子</div>
	<div class="right">右边的盒子</div>
</body>
</html>

效果：

如果父元素有足够的空间，那么右边的盒子紧靠着左边的盒子，左边的盒子靠着边。

如果没有足够的空间，那么就会靠着左边的盒子，如果再没有足够的空间靠着左边的盒子，自己往边靠

image


4 浮动元素的收缩

收缩：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>浮动现象</title>
	<style type="text/css">
		div{
			/*width: 200px;*/
			height: 200px;
			color: #fff;
		}
		div.left{
			background-color: red;
			float: left;
		}
		div.right{
			background-color: green;
			/*float: left;*/
		}
	</style>
</head>
<body>
	<div class="left">左边的盒子</div>
	<div class="right">右边的盒子</div>
</body>
</html>

注意：

关于浮动，我们初期一定要遵循一个原则，永远不是一个盒子单独浮动，要浮动就要一起浮动。另外，有浮动，一定要清除浮动。

image


5 清除浮动方式

浮动虽然能实现网页多列排版布局，但同样带来了父元素高度塌陷问题

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>浮动元素的破坏性</title>
	<style type="text/css">
            .top_bar{
                border: 1px solid red;
            }
		.child1{
			width: 200px;
			height: 200px;
			background-color: green;
			float: left;
		}
		.child2{
			width: 200px;
			height: 200px;
			background-color: orange;
			float: right;
		}
		.header{
			width: 100%;
			height: 100px;
			background-color: purple;
		}
	</style>
</head>
<body>
	<div class="top_bar">
		<div class="child1">儿子</div>
		<div class="child2">二儿子</div>
	</div>
	<div class="header">
		
	</div>

</body>
</html>

出现top_bar塌陷：

image

那么怎么解决呢？

方式一：

给父元素设置固定高度，可与子标签的高度对齐。

.top_bar{
    height: 200px
    border: 1px solid red;
}

缺点：使用不灵活，后期维护成本高。

优点：应用于网页中盒子固定高度的区域，比如固定的导航栏。

方式二（内墙法）：

规则：在最后一个浮动元素的后面加一 个空的块级元素, 并且设置该属性clear: both;

有三个值：

left：当前元素左边不允许有浮动元素

right：当前元素右边不允许有浮动元素

both：当前元素左右两边不允许有浮动元素

none：默认值。允许浮动元素出现在两侧。

.clear{
    clear: both;
}

<body>
	<div class="top_bar">
		<div class="child1">儿子</div>
		<div class="child2">二儿子</div>
		<div class="clear"></div>
	</div>
		<div class="header">	
	</div>
</body>

缺点：结构冗余

方法三（伪元素清除-常用）：

.clearfix:after{             /*在类名为“clearfix”的元素内最后面加入内容*/
    /*必须要写以下这三个参数*/
    content: '.';            /*内容为“.”就是一个英文的句号而已。也可以不写。*/
    clear: both;             /*清除左右两边浮动。*/
    display: block;          /*加入的这个元素转换为块级元素。*/


    visibility: hidden;              /*可见度设为隐藏。注意它和display:none;是有区别的。*/
                                              /* visibility:hidden;仍然占据空间，只是看不到而已；*/
    line-height: 0;                  /*行高为0；*/
    height: 0;                       /*高度为0；*/
    font-size:0;                     /*字体大小为0；*/
}

<body>
	<div class="top_bar after">
		<div class="child1">儿子</div>
		<div class="child2">二儿子</div>
	</div>
		<div class="header">	
	</div>
</body>

<style type="text/css">
.top_bar{
    /*height: 200px;*/
    border: 1px solid red;
}
.child1{
    width: 200px;
    height: 200px;
    background-color: green;
    float: left;
}
.child2{
    width: 200px;
    height: 200px;
    background-color: orange;
    float: right;
}
.header{
    width: 100%;
    height: 100px;
    background-color: purple;
}
.clear{
    clear: both;
}
div::after{           /*在类名为“clearfix”的元素内最后面加入内容*/
    /*行内元素*/
    content: ".";     /*内容为“.”就是一个英文的句号而已。也可以不写。*/
    display: block;   /*加入的这个元素转换为块级元素。*/
    clear: both;      /*清除左右两边浮动。*/
}
</style>

image


方法四（overflow：hidden - 常用）：

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

overflow功能介绍

overflow: visible; /*默认文本超出盒子也显示*/
overflow: hidden;  /*超出部分隐藏 */
overflow: scroll;  /*超出部分隐藏且有滚动条可超看超出部分*/
overflow: auto;  /*自动，效果与scroll效果一样*/
overflow：inherit；  /*继承父集*/

<head>
	<meta charset="utf-8">
	<title>overflow</title>
	<style type="text/css">
		body{
			overflow: scroll;
		}
		.box{
			width: 300px;
			height: 300px;
			border: 1px solid red;
			overflow: visible; /*默认文本超出盒子也显示*/
			/*overflow: hidden;  超出部分隐藏
			overflow: scroll;  超出部分隐藏且有滚动条可超看超出部分
			overflow: auto;  自动，效果与scroll效果一样
			overflow：inherit；  继承父集
			*/
		}
	</style>
</head>

<body>
	<div class="box">
		在不到一个月之前，也就是今年的5月26号，美国总统拜登对外发布一份正式声明，宣称他已经下令要求美国的情报机构，对新冠疫情的起源展开调查分析，确认这种前所未见的新型病毒究竟是动物宿主感染还是来自于实验室事故，并且还要求美国情报机构提高调查力度，在90天之内形成报告并递交到白宫，而在声明的最后，拜登老调重弹的呼吁那些“志同道合的伙伴们”，一共“敦促”中国参与全面、透明、以证据为基础的国际调查。

		如今距离拜登给出的90天期限已经走完了近三分之一，美国的情报机构们依旧没有更多的收获，眼看着总统设定的最后期限正在逼近，因此美国外交系统开始就病毒溯源向中国下达了最后通牒，而且只给了我们两个选择：要么配合调查，要么被国际孤立。
	</div>
</body>

那么如何清除浮动：

BFC区域一条规则:计算BFC (块级盒子)的高度时,浮动元素也参与计算
形成BFC的条件:除了overflow:visitable的属性值
B1ock Formtting Context

	<style type="text/css">
		.top_bar{
			border: 1px solid red;
			overflow: hidden;
		}
		.child1{
			width: 200px;
			height: 200px;
			background-color: green;
			float: left;
		}
		.child2{
			width: 200px;
			height: 200px;
			background-color: orange;
			float: right;
		}
		.header{
			width: 100%;
			height: 100px;
			background-color: purple;
		}
		.clear{
			clear: both;
		}
	</style>

<body>
	<div class="top_bar">
		<div class="child1">儿子</div>
		<div class="child2">二儿子</div>
		<!-- <div class="clear"></div> -->
	</div>
		<div class="header">	
	</div>
</body>

标签：浮动,13,float,盒子,color,元素,height,属性,200px
来源： https://www.cnblogs.com/it-lkp/p/16551508.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有