首先在这里向大家介绍一下自己,我是一名在校大学生,由于主攻后端,软件工程师方向,所以对于前端不是很投入,只是学习一些基本的,今天我来给大家介绍一下我认识下的浮动。由于在几乎没有在博客里发表过文章,所以格式,美观性都不是很好,但知识你值得一看,如有错误的理解,敬请斧正!
-
浮动是用来干什么,它的作用是什么?
浮动就是让元素可以向左或向右移动,直到它的外边距碰到其父级的内边距或者是上一个元素的外边距。
布局网页并定位网页元素。
让块元素可以通过浮动来左右相邻。 -
浮动特性
支持所有的css样式.
内容撑开宽高(我感觉重中之重,重在理解).
多个元素设置浮动,会排在一排.
脱离文档流.
提升层级半级.
备注:A元素设置了浮动属性后,B元素就会无视这个元素的存在,但是B元素中的文本内容依然会为A元素让出位置使自身的文本内容 (内容撑开宽高)环绕在设置浮动元素的周围
-
浮动-float属性
left 元素向左浮动 float:left
right 元素向右浮动 float:right
none 默认值,元素不浮动 float:none -
消除浮动属性(由于浮动会影响周边的元素发生许多不能避免的问题,所以必要时要消除浮动)
left:左侧不允许浮动元素
right:右侧不允许浮动元素
both:左右都不允许
none:默认值。允许浮动元素出现在两侧 -
消除浮动的三种方式
这是每个元素的层叠样式表,后面只需要三种方式只需要调用他们的这个.css
test.css
@charset "utf-8";
/* .clear::after{
content: '';
clear: both;
display: block;
} */
.head{
border: 3px solid #000040;
}
.first{
float: left;
width: 100px;
height: 100px;
background: #00ff00;
}
.second{
float: left;
width: 130px;
height: 130px;
background: #800000;
}
.three{
width: 150px;
height: 150px;
background: #8000ff;
}
第一种:使用带clear属性的空元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用带clear属性的空元素</title>
<link rel="stylesheet" href="test.css">
<style>
.clears {
clear:both;
height:0;
}
</style>
</head>
<body>
<div class="head">
<div class="first">
我是块元素1,我有左浮动
</div>
<div class="second">
我是块元素2,我有左浮动
</div>
<div class="clears"></div>
<div class="three">
我是块元素3,我没有浮动
</div>
</div>
</body>
</html>
如果没加
<style>
.clears {
clear:both;
height:0;
}
</style>
则会会影响块元素三的大小。
这个代码的意思就是清除左右的浮动,并且让高度为0,相当于一个空元素,只是为了清除浮动
第二种:使用CSS的overflow属性 hidden或者auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用CSS的overflow属性:</title>
<link rel="stylesheet" href="test.css">
<style>
.head{
overflow: hidden
}
</style>
</head>
<body>
<div class="head">
<div class="first">
我是块元素1,我有左浮动
</div>
<div class="second">
我是块元素2,我有左浮动
</div>
</div>
</body>
</html>
style 里面加的语句就是盒子满了的部分自动隐藏
如果不加
两个都是浮动元素 ,会造成脱离文档流,使盒子塌陷,所以加上style里面的样式 清除浮动,他俩的高度自动被盒子包着
第三种 使用CSS的 :after 伪元素:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用CSS的 :after 伪元素</title>
<link rel="stylesheet" href="test.css">
<style>
.clear::after{
content: '';
clear: both;
display: block;/*让他们又成为块元素*/
height: 0;
}
</style>
</head>
<body>
<div class="head clear">
<div class="first">
我是块元素1,我有左浮动
</div>
<div class="second">
我是块元素2,我有左浮动
</div>
</div>
</body>
</html>
如果没加style里面的语句,则会脱离文档流
加了之后的结果显示,元素恢复块元素,重新进入盒子
以上就是我的认识
在我初学的时候,我感觉最重要的就是理解浮动,浮动用来干什么,怎样用,为什么要清除浮动,怎样清除,学习一定要重于理解,有时候不会的知识,可以一边实操一边理解,会有非常好的作用,程序员重在实操,纸上得来终觉浅,要下定决心弄懂 必须实操。
浮动 这里,重要的是如果A元素有浮动属性啦,紧接着B元素忽视这个A元素,他的高度计算时,起点是以忽视浮动元素之后的起点
@charset "utf-8";
.head{
border: 3px solid #000040;
}
.first{
float: left;
width: 100px;
height: 100px;
background: #00ff00;
}
.second{
/* float: left; */
width: 200px;
height: 200px;
background: #800000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="head">
<div class="first">
我是块元素1,我有左浮动
</div>
<div class="second">
我是块元素2,我没有浮动
</div>
</div>
</body>
</html>
块元素2的起点时红色标记的地方,忽视浮动元素1.
以上就是我目前对浮动知识的认识,希望大家仔细看看,如有错误敬请斧正!