首页 / 知识
网页的布局方式之清除浮动
2023-04-11 15:14:00
盒子的高度问题
1.标准流中盒子的高度可以被内容高度撑起来;
2.浮动流中浮动的内容不能撑起盒子的高度;
为什么要清楚浮动?
相邻的盒子之间,如果前面的盒子没有高度,那么后面盒子中的浮动元素就会去找前面盒子中的浮动元素,这样会导致界面混乱,所以需要清除浮动;
清除浮动方式一:
解决方案:
给前面一个父元素设置高度
注意点:
在企业开发中,我们能不写高度就不写高度,所以这种方式用得很少;
CSS:
<style>
*{
margin:0;
padding:0;
}
.box1{
height:20px;//给前面盒子设置高度
background-color:red;
}
.box2{
background-color:green;
}
.box1p{
width:100px;
background-color:blue;
}
.box2p{
width:100px;
background-color:yellow;
}
p{
float:left;
}</style>
body:
<divclass="box1">
<p>我是文字1</p>
<p>我是文字1</p>
<p>我是文字1</p></div><divclass="box2">
<p>我是文字2</p>
<p>我是文字2</p>
<p>我是文字2</p>
</div>
清除浮动方式二:
解决方案:
给后面的盒子添加clear:both;属性
clear属性取值:
none:默认取值,按照浮动元素的排序规则来排序(左浮动找左浮动,右浮动找右浮动)
left:不要找前面的左浮动元素(也就是:不要和前面的左浮动元素显示在一行)
right:不要找前面的右浮动元素
both:不要找前面的左浮动元素和右浮动元素
注意点:
当我们给某个元素添加clear属性之后,那么这个属性的margin属性就会失效;所以不推荐使用
CSS:
<style>
*{
margin:0;
padding:0;
}
body{
border:1pxsolid#000;
}
.box1{
background-color:red;
}
.box2{
background-color:green;
clear:both;//给后面的盒子添加clear:both;属性
margin-top:28px;
}
.box1p{
width:100px;
background-color:blue;
}
.box2p{
width:100px;
background-color:yellow;
}
p{
float:left;
}</style>
清除浮动方式三:
解决方案:
外墙法:在两个有浮动子元素的盒子之间添加一个额外的块级元素;并且设置clear:both;属性;
注意点:
外墙法它可以让第二个盒子使用margin-top属性,
外墙法不可以让第一个盒子使用margin-bottom属性,
不过可以通过设置额外标签的高度来实现margin效果;
搜狐中大量使用了这个技术,但是由于需要添加大量无意义的标签,所以不推荐使用;
CSS:
<style>
*{
margin:0;
padding:0;
}
.box1{
background-color:red;/*margin-bottom:10px;*///外墙法不可以让第一个盒子使用margin-bottom属性,
}
.box2{
background-color:green;/*margin-top:10px;*///外墙法它可以让第二个盒子使用margin-top属性,
}
.box1p{
width:100px;
background-color:blue;
}
.box2p{
width:100px;
background-color:yellow;
}
p{
float:left;
}
.wall{
clear:both;//设置clear:both;属性;
}
.h20{
height:20px;//设置额外标签的高度来实现margin效果;
background-color:skyblue;
}
</style>
<divclass="box1">
<p>我是文字1</p>
<p>我是文字1</p>
<p>我是文字1</p></div><divclass="wallh20"></div>//外墙法:在两个有浮动子元素的盒子之间添加一个额外的块级元素;<divclass="box2">
<p>我是文字2</p>
<p>我是文字2</p>
<p>我是文字2</p></div>
清除浮动方式四:
解决方案:
内墙法:
1在第一个盒子中所有子元素最后添加一个额外的块级元素,
2给这个额外添加的块级元素设置clear:both;属性
注意点:
内墙法它可以让第二个盒子使用margin-top属性
内墙法它可以让第一个盒子使用margin-bottom属性
<a>内墙法会自动撑起盒子的高度,所以可以直接设置margin属性</a>
外墙法和内墙法区别?
外墙法不能撑起第一个盒子的高度,而内墙法可以撑起第一个盒子的高度
在企业开发中<a>不常用隔墙法</a>来清除浮动(隔墙法:外墙法和内墙法)
CSS:
<style>
*{margin:0;padding:0;
}.box1{background-color:red;/*margin-bottom:10px;*/
}.box2{background-color:green;/*margin-top:10px;*/
}.box1p{width:100px;background-color:blue;
}.box2p{width:100px;background-color:yellow;
}p{float:left;
}.wall{clear:both;
}.h20{height:20px;background-color:skyblue;
}</style></head>
<divclass="box1">
<p>我是文字1</p>
<p>我是文字1</p>
<p>我是文字1</p>
<divclass="wallh20"></div>//设置内墙</div><divclass="box2">
<p>我是文字2</p>
<p>我是文字2</p>
<p>我是文字2</p></div>
本文转载自中文网 |
最新内容
相关内容
python 培训之 object是什么类型
python 培训之 object是什么类型，培训，类型，实例，顶端，对象，关系，链条，父子，数据类型，属性，在Python的世界中，object是父子关系的顶端，所有的数
pythonc语言取余和python取余的区
pythonc语言取余和python取余的区别，培训，资料，语言，负数，区别，被除数，符号，除数，规定，余数，今天看书发现python与C的负数取余运算结果不同,
python如何定义接受参数的函数
python如何定义接受参数的函数，信息，培训，位置，参数，函数，列子，效果，定义，更多，内容，python中的函数可以有参数，也可以无参数，参数可以分为默认
python脚本和网页的区别是什么
python脚本和网页的区别是什么，网站，培训，设计，通用，标准，平台，网页，语言，脚本，标记，python是一种计算机程序设计语言，一种面向对象的动态类型
python数据分析相关的技术
python数据分析相关的技术，分析，数据，培训，技术，
python可以做网页编程吗？
python可以做网页编程吗？，技术，公司，数据，网络，人工智能，工资，分析，工作，设计，市场，什么是Python? Python是一种计算机编程语言，也是一种
python怎么获取列表元素的索引
python怎么获取列表元素的索引，培训，索引，元素，结果，列表，方法，中值，本文，下面，以上，本文主要介绍了python中如何获取列表的索引，以及如何返回
python有哪些推荐使用的装饰器？
python有哪些推荐使用的装饰器？，单位，时间，代码，标准，灵活，软件，数据，连续，培训，模块，众所周知，Python语言非常强大，有很多优点。值得一提的是，它
python版本2和3之间的区别是什么？
python版本2和3之间的区别是什么？，培训，区别，之间，版本，
pythonHTTP与HTTPS之间的区别
pythonHTTP与HTTPS之间的区别，培训，区别，之间，
python学习Python爬虫的用途有哪些
python学习Python爬虫的用途有哪些？，培训，爬虫，用途，
pythoneval在python中的意思是什么
pythoneval在python中的意思是什么，数据，培训，简介，字符串，表达式，函数，类型，字典，意思，变量，eval在python中的意思：1、eval函数的简介和语法：e