关于浮动元素在窗口缩小情况下,布局下沉的深思
- 本博客主要总结下浮动元素下沉
提示
博主:章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041
关于浮动元素在窗口缩小情况下,布局下沉的深思
我们在做前端项目的时候,浮动,定位等特性是css特性中最重要最重要的要素,但是有时候也面临着一个很尴尬的问题,就是当窗口在缩小的时候,浮动元素会下沉到下一行,这是什么元素导致的??
先来看一个案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.fl_l{
float: left;
}
.fl-r{
float: right;
}
.clearfix:after{
content: '';
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
.main{
margin: 30px auto;
background: deeppink;
}
.content p{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background: blue;
margin: 10px;
}
</style>
</head>
<body>
<div class="main " >
<div class="content clearfix">
<p class="fl_l">1</p>
<p class="fl_l">2</p>
<p class="fl_l">3</p>
<p class="fl_l">4</p>
<p class="fl-r">5</p>
</div>
</div>
</body>
</html>
拖动浏览后的图示:
看的很清楚对吧,这就是我所要陈述的浏览器塌陷的问题,因为在做pc端的时候,很多时候都是以body为基础的,那么body的宽度变小的时候,怎么让我们的浮动元素的布局不会发生改变呢
首先你得了解什么是浮动吧,浮动不就是使元素脱离了文档流,浮动在原来的文本之上,占有0。5个优先级,然后将原来的块级元素变成行块级元素,然后能够横向的排列的过程么,但是它得有个参考点啊,这个参考点就是父级元素的宽度,如果父级元素的宽度都不是固定的,那么它还的浮动过程不也是相对是动态的么
还有一点要注意浮动元素的特点就是,如果剩余的空间不足以容纳浮动元素的话,这个时候就会进行换行浮动,这也就是浮动元素下沉,布局混乱的最主要的原因
解决方法:要明确浮动元素父级的宽度,或者最小宽度。
对代码进行小小修改来看下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.fl_l{
float: left;
}
.fl-r{
float: right;
}
.clearfix:after{
content: '';
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
.main{
margin: 30px auto;
background: deeppink;
width: 1200px;/*给main添加一个1200px的宽度**/
}
.content p{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background: blue;
margin: 10px;
}
</style>
</head>
<body>
<div class="main " >
<div class="content clearfix">
<p class="fl_l">1</p>
<p class="fl_l">2</p>
<p class="fl_l">3</p>
<p class="fl_l">4</p>
<p class="fl-r">5</p>
</div>
</div>
</body>
</html>
对main添加了一个固定的宽度
显示如下
对于PC浏览器来说,很多时候没有办法把body的宽度给固定了,那样有些网页就被固定化了。同样,如果把main给固定下来的话,这样也是不科学的,因为很多时候,页面中的盒子都是充满body的,这个时候就需要用到min-width了,最小宽度
使用min-width来进行修正操作:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.fl_l{
float: left;
}
.fl-r{
float: right;
}
.clearfix:after{
content: '';
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
.main{
margin: 30px auto;
background: deeppink;
min-width: 1200px;/**使用min-width来避免布局混乱*/
}
.content p{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background: blue;
margin: 10px;
}
</style>
</head>
<body>
<div class="main " >
<div class="content clearfix">
<p class="fl_l">1</p>
<p class="fl_l">2</p>
<p class="fl_l">3</p>
<p class="fl_l">4</p>
<p class="fl-r">5</p>
</div>
</div>
</body>
</html>
从上面可以看到,其实布局的宽度还是body的,但是这个时候在拖拉的过程中,并不会引起布局塌陷了,我个人觉得使用min-width的是比较好的。
这篇博客在截图的时候,背景上有点问题,最近也比较忙