浮动(Float)
今天我们来讲以后网页布局中最最重要的一个知识点浮动.
我们都知道CSS提供了三种传统的布局方式:
-
标准流
-
浮动
-
定位(后面博客会给大家进行讲解,请及时关注!)
标准流
- 所谓的标准流就是标签按照规定好的方式排列利用块元素和行内元素进行标准流布局
浮动
在学习浮动之前,我们先来想想我们为什么需要浮动?
- 因为在网页中有很多的布局效果,只使用标准流没有办法完成,此时我们就需要利用浮动来完成布局
浮动的作用
- 浮动可以改变网页中标签的默认排列方式
浮动的应用
- 在浮动中最典型的应用就是多个块元素一行排列显示
浮动的语法
float属性创建浮动框
选择器 {
float : 属性值;
}
none正常不浮动(默认值)
left元素左浮动
right元素右浮动
浮动的特性:
-
浮动的元素脱离了标准流(脱标)
-
浮动的元素会在一行显示并且元素的顶部对齐
-
浮动的元素具有行内块元素的特性
注意:
-
浮动的元素不会保留原有的位置,就是我们所说的脱标.
-
我们通常为了约束浮动元素的位置,我们可以先用标准流元素排列在上下位置
了解了浮动以后,我们可以说任何元素都可以浮动
-
一个元素添加了浮动以后就有了行内块元素的特性
-
一个行内块元素如果没有设置宽度的话,那么它的宽度由内容的大小决定
浮动布局的注意点:
-
浮动和标准流的父盒子搭配,就是我们在布局的时候标准流父元素排列成上下位置,内部子元素采用浮动排列成左右位置.
-
一个盒子里面有许多的盒子,一个盒子浮动以后理论上其余的兄弟元素也要浮动
浮动实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>logo浮动</title>
<style>
* {
margin: 0ox;
padding: 0px;
}
.box1 {
float: left;
width: 200px;
height: 580px;
background-color: #616e7d;
}
.box2 {
float: left;
background-color: white;
width: 470px;
height: 580px;
margin-left: 5px;
}
.box2 .box22 {
height: 163px;
width: 460px;
}
.box10 {
width: 130px;
height: 85px;
float: left;
}
.box2 .box2222 {
border-top: 1px solid lightgrey;
padding-top: 5px;
}
.box .box222 {
height: 10px;
}
.box1 .logo {
font-size: 80px;
font-weight: 800;
color: white;
margin-bottom: 10px;
text-align: center;
}
.box1 .mo {
font-size: 15px;
color: white;
margin-top: 0px;
text-align: center;
}
.box1 ul {
text-align: center;
margin-top: 60px;
list-style: none;
}
.box1 ul li {
line-height: 50px;
}
.box {
margin-left: 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<p class="logo">logo</p>
<p class="mo">某某摄影专辑</p>
<ul>
<li><b>网站首页</b></li>
<li><b>咨询中心</b></li>
<li>
<b>产品展示</b>
</li>
<li><b>关于我们</b></li>
<li><b>练习我们</b></li>
</ul>
</div>
<div class="box2">
<div class="box22"><img src="img/banner.jpg" alt="人"></div>
<p class="box222">当前位置:首页>关于我们</p>
<div class="box2222">
<div class="box10"><img src="img/01.jpg" alt="女"></div>
<label for="">水墨（风格）摄影和传统的水墨画一样，现市面上出现的水墨摄影作品，按题材，可以分为风景和花鸟，对应国画中的山水画和花鸟画；按手法和意境，可以分为抽象和具象，对应国画中的写意和工笔。
水墨风格的摄影照片虽然免不了使用Photoshop等软件的后期加工，但是这并不意味着可以任意扭曲原照片。全息摄影是指一种记录被摄物体反射波的振幅和位相等全部信息的新型摄影技术。普通摄影是记录物体面上的光强分布，它不能记录物体反射光的位相信息，因而失去了立体感。全息摄影采用激光作为照明光源，并将光源发出的光分为两束，一束直接射向感光片，另一束经被摄物的反射后再射向感光片。人眼直接去看这种感光的底片，只能看到像指纹一样的干涉条纹，但如果用激光去照射它，人眼透过底片就能看到原来被拍摄物体完全相同的三维立体像。一张全息摄影图片即使只剩下一小部分，依然可以重现全部景物。全息摄影可应用于工业上进行无损探伤，超声全息，全息显微镜，息摄影存储器,全息电影和电视等许多方面。
</label>
</div>
</div>
</div>
</body>
</html>
我们学了浮动以后那么我们再来学习怎么清除浮动!
你们肯定会想为什么浮动以后我们还要再清除浮动?
- 因为浮动我们上面说过一个盒子浮动以后就是脱标了,那么脱标以后父盒子没有了高度,不会被撑开盒子,反而还会影响下面的标准流的盒子.所以我们才需要清除浮动.
清除浮动的本质
-
清除浮动的本质其实就是消除浮动元素对标准流造成的影响
-
如果父盒子本身有高度的话,则此时不需要清除浮动
-
清除浮动之后，父级就会根据浮动的子级盒子自动检测高度, 父级有了高度，就不会影响下面的标准流了.
清除浮动的语法:
选择器 {
clear: 属性值;
}
属性值:left(清除左侧浮动的影响)right(清除右侧浮动的影响)both(同时清除左右两侧的浮动的影响)
一般情况下我们只用clear:both;
清除浮动的方法:
额外标签法(隔墙法)
-
所谓的隔墙法就是在浮动元素的末尾添加一个空的标签例如
<div style="clear:both"> </div> -
优点:通俗易懂,书写方便
-
缺点:添加了一个无意义的标签,结构化较差
-
注意:额外添加的这个新的空标签必须是块级元素
父级添加overflow属性
-
给父级添加overflow属性,添加的属性值为:hidden
-
优点:代码简洁
-
缺点:无法显示溢出的部分
父级添加:after伪元素和父级添加双伪元素这两种方法在一般情况下我们用不到.所以这里不做深度解析,如果想要了解的话,可以去看一下一些大型网站上面的源码来进行了解.
清除浮动实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.zong {
width: 800px;
background-color: yellow;
border: 1px solid red;
/* 清除浮动使用overflow: hidden;
必须在父级中添加*/
/* overflow: hidden; */
}
.yi {
width: 200px;
height: 200px;
background-color: violet;
}
.er {
width: 200px;
height: 200px;
background-color: green;
}
.yi,
.er {
float: left;
}
.foot {
width: 800px;
height: 200px;
background-color: pink;
}
.biaoqian {
/* 额外的标签设置css样式clear: both; */
/* both是左右两侧都清除 */
/* left right分别是清除左侧和右侧的浮动 */
clear: both;
}
</style>
</head>
<body>
<div class="zong">
<div class="yi"></div>
<div class="er"></div>
<!-- 清除浮动的话 需要在浮动元素的最后加一个额外的标签 -->
<p class="biaoqian"></p>
</div>
<div class="foot"></div>
</body>
</html>
1602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
