我是一个前端初学者,学到float这属性,作为笔记整理,写了这篇文章。有需要的同道中人可以参考,如有不足和错误的地方,请指出,我定虚心接受,认真修改。
首先, 这个css属性是基于块元素,发挥其作用的,有关块元素和行内元素的知识请大家自行查询,这边就不加以叙述了。
什么是 float?
在标准流中,块元素按照水平方向自动伸展,直到遇到包含它的元素的边界,也就是其父元素;在竖直方向与其兄弟元素垂直依次排列,不能并排在一行中。可用display属性改变其为行内元素。float,也有相同的作用,当我们对一个块元素使用float时,块元素就会脱离标准流,按照float所设置的属性值向其父元素的左边或者右边靠拢,其他元素会自动忽略该元素,趁机占领它的位置,同时,默认情况下盒子的宽度不在独占一行,而是由具体宽度或者盒子内的内容决定。
float 一共有三个属性, none(默认值),也就是标准流,left,向父元素左边靠拢,right,向父元素右边靠拢,接下来我们就依次看一下这三个状态的效果。
下面的关于float的部分,都基于以下代码,后面不在叙述
当使用 float:none; 或者不使用时的效果如下,此时,元素处在标准流中:
当时div1设置 float:right; 时,效果如下,此时,div1,脱离标准流, 不在占有原来的位置,后续元素依次顶替其原来的位置:
当div1设置float:left;此时,div1依旧脱离文档流,后续元素会占领它原有的位置依次排列,从效果图中我们发现,div2被div1覆盖了,所以我们看不到div2:
以上就是快元素设置float三个基本属性值的效果。
更多复杂的float实现效果大家可以自己去探索,在探索中你会发现float对我们布局来说是很有用的,但是他也会带来很多不可避免的问题,遇到这些问题,也有很多解决的方法,之后,有空会更新文章,更大家一起思考。
下面是利用float和position进行的三个布局页面,也用到了 @media and screen(max-width: 960px) 以及 @media and screen(max-width: 768px) 来实现不同屏幕宽度下的不同效果。
当大于960时布局样式如下,中间弹性布局,宽度可变,且排列如下,左边固定宽度100px, 右边固定宽度 50px
当宽度在768到960之间时,样式如下,中间弹性布局,宽度可变,左边固定宽度100px,右边固定宽度50px:
当宽度小于768时, 样式如下,正常按照标准流布局:
源码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>布局练习</title>
<style>
body {
margin: 0;
}
.left {
float: left;
width: 100px;
height: 650px;
background-color: red;
}
.right {
float: right;
width: 50px;
height: 650px;
background-color: red;
}
.center {
height: 650px;
background-color: blue;
margin-left: 100px;
margin-right: 50px;
}
.center1 {
width: 100%;
height: 50px;
background-color: #eee;
}
.center2 {
float: left;
width: 20%;
height: 300px;
background-color: rgb(211, 145, 145);
}
.center3 {
float: left;
width: 20%;
height: 300px;
background-color: rgb(56, 25, 25);
}
.center4 {
float: right;
height: 300px;
width: 60%;
background-color: rgb(102, 18, 18);
}
.center5 {
float: left;
height: 300px;
width: 60%;
background-color: rgb(226, 72, 72);
}
.center6 {
float: left;
height: 300px;
width: 20%;
background-color: rgb(138, 14, 14);
}
.center7 {
float: left;
height: 300px;
width: 20%;
background-color: rgb(128, 75, 75);
}
@media screen and (max-width: 960px) {
.left {
float: left;
width: 100px;
background-color: red;
}
.right {
float: right;
width: 50px;
background-color: red;
}
.center {
margin-left: 100px;
margin-right: 50px;
height: 650px;
background-color: blue;
}
.center1 {
width: 100%;
height: 50px;
background-color: #eee;
}
.center2 {
width: 100%;
height: 100px;
background-color: rgb(211, 145, 145);
}
.center3 {
width: 100%;
height: 100px;
background-color: rgb(56, 25, 25);
}
.center4 {
height: 100px;
width: 100%;
background-color: rgb(102, 18, 18);
}
.center5 {
height: 100px;
width: 100%;
background-color: rgb(226, 72, 72);
}
.center6 {
height: 100px;
width: 100%;
background-color: rgb(138, 14, 14);
}
.center7 {
height: 100px;
width: 100%;
background-color: rgb(128, 75, 75);
}
}
@media screen and (max-width: 768px) {
.left {
width: 100%;
height: 100px;
background-color: red;
}
.right {
position: absolute;
top: 450px;
width: 100%;
height: 100px;
background-color: red;
}
.center {
clear: both;
width: 100%;
height: 350px;
background-color: blue;
margin-left: 0;
margin-right: 0;
}
.center1 {
width: 100%;
height: 50px;
background-color: #eee;
}
.center2 {
width: 100%;
height: 50px;
background-color: rgb(211, 145, 145);
}
.center3 {
width: 100%;
height: 50px;
background-color: rgb(56, 25, 25);
}
.center4 {
height: 50px;
width: 100%;
background-color: rgb(102, 18, 18);
}
.center5 {
height: 50px;
width: 100%;
background-color: rgb(226, 72, 72);
}
.center6 {
height: 50px;
width: 100%;
background-color: rgb(138, 14, 14);
}
.center7 {
height: 50px;
width: 100%;
background-color: rgb(128, 75, 75);
}
}
</style>
</head>
<body>
<div class="container">
<div class="left">左边</div>
<div class="right">右边</div>
<div class="center">
<div class="center1">1</div>
<div class="center2">2</div>
<div class="center3">3</div>
<div class="center4">4</div>
<div class="center5">5</div>
<div class="center6">6</div>
<div class="center7">7</div>
</div>
</div>
</body>
</html>