zoukankan      html  css  js  c++  java

  • 如何更好利用浮动---浮动的合理利用及清除

    　　CSS浮动合理利用可以带给我们很好的布局体验，但在很多时候因为元素的浮动似乎又给我们带来了很多麻烦。下面我们就来对神奇的浮动一探究竟。

    　　浮动是相对于CSS中的相对定位和绝对定位而言的，浮动的框可以向左向右移动，直到它的外边缘碰到保护框或另一个浮动框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。如果包含框太窄，无法容纳水平排列的几个浮动元素，那么空间不足的浮动框会向下移动，直到有足够的空间。如下图左边的图片。大家可能会想，如果浮动元素的高度不同怎么办？如下图右所示~这种情况下框3没有办法继续下移，所以只能卡在那里了~

    　　关于CSS浮动，float可谓功不可没。我们通过float属性实现元素的浮动，几乎所有浏览器都支持，属性值包括left（元素向左浮动）right(元素向右浮动)none(默认值，元素不浮动，并会显示在其文本中出现的位置)inherit(规定应该从父元素继承float属性的值)*低版本的IE不支持inherit属性，不过IE11支持。刚才测试中竟然发现IE不支持png的图片格式，各种sad~

    　　在低版本的IE中，float:right的元素会换行显示，需要把该元素写在同行元素的左边，在IE11中，就不必考虑那么多了，float:right不论写在一行的哪里都是可以的。

    float的具体应用：

    1可以使图像浮动于一个段落的右侧

     1 <html>
 2 <head>
 3 <style type="text/css">
 4 img 
 5 {
 6 float:right
 7 }
 8 </style>
 9 </head>
10 
11 <body>
12 <p>在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
13 <p>
14 <img src="/i/eg_cute.gif" />
15 This is some text. This is some text. This is some text.
16 This is some text. This is some text. This is some text.
17 This is some text. This is some text. This is some text.
18 This is some text. This is some text. This is some text.
19 This is some text. This is some text. This is some text.
20 This is some text. This is some text. This is some text.
21 This is some text. This is some text. This is some text.
22 This is some text. This is some text. This is some text.
23 This is some text. This is some text. This is some text.
24 This is some text. This is some text. This is some text.
25 </p>
26 </body>
27 
28 </html>
    View Code

    2将带有边框和边界的图像浮动于段落的右侧

     1 <html>
 2 <head>
 3 <style type="text/css">
 4 img 
 5 {
 6 float:right;
 7 border:1px dotted black;
 8 margin:0px 0px 15px 20px;
 9 }
10 </style>
11 </head>
12 
13 <body>
14 <p>在下面的段落中，图像会浮动到右侧，并且添加了点状的边框。我们还为图像添加了边距，这样就可以把文本推离图像：上和右外边距是 0px，下外边距是 15px，而图像左侧的外边距是 20px。</p>
15 <p>
16 <img src="/i/eg_cute.gif" />
17 This is some text. This is some text. This is some text.
18 This is some text. This is some text. This is some text.
19 This is some text. This is some text. This is some text.
20 This is some text. This is some text. This is some text.
21 This is some text. This is some text. This is some text.
22 This is some text. This is some text. This is some text.
23 This is some text. This is some text. This is some text.
24 This is some text. This is some text. This is some text.
25 This is some text. This is some text. This is some text.
26 This is some text. This is some text. This is some text.
27 </p>
28 </body>
29 
30 </html>
    View Code

    3带标题的图像浮动于右侧

     1 <html>
 2 <head>
 3 <style type="text/css">
 4 div
 5 {
 6 float:right;
 7 120px;
 8 margin:0 0 15px 20px;
 9 padding:15px;
10 border:1px solid black;
11 text-align:center;
12 }
13 </style>
14 </head>
15 
16 <body>
17 <div>
18 <img src="/i/eg_cute.gif" /><br />
19 CSS is fun!
20 </div>
21 <p>
22 This is some text. This is some text. This is some text.
23 This is some text. This is some text. This is some text.
24 This is some text. This is some text. This is some text.
25 This is some text. This is some text. This is some text.
26 This is some text. This is some text. This is some text.
27 This is some text. This is some text. This is some text.
28 This is some text. This is some text. This is some text.
29 This is some text. This is some text. This is some text.
30 This is some text. This is some text. This is some text.
31 This is some text. This is some text. This is some text.
32 This is some text. This is some text. This is some text.
33 This is some text. This is some text. This is some text.
34 This is some text. This is some text. This is some text.
35 </p>
36 
37 <p>
38 在上面的段落中，div 元素的宽度是 120 像素，它其中包含图像。div 元素浮动到右侧。我们向 div 元素添加了外边距，这样就可以把 div 推离文本。同时，我们还向 div 添加了边框和内边距。
39 </p>
40 </body>
41 
42 </html>
    View Code

    4使段落的首字母浮动于左侧

     1 <html>
 2 <head>
 3 <style type="text/css">
 4 span
 5 {
 6 float:left;
 7 0.7em;
 8 font-size:400%;
 9 font-family:algerian,courier;
10 line-height:80%;
11 }
12 </style>
13 </head>
14 
15 <body>
16 <p>
17 <span>T</span>his is some text.
18 This is some text. This is some text.
19 This is some text. This is some text. This is some text.
20 This is some text. This is some text. This is some text.
21 This is some text. This is some text. This is some text.
22 This is some text. This is some text. This is some text.
23 This is some text. This is some text. This is some text.
24 This is some text. This is some text. This is some text.
25 </p>
26 
27 <p>
28 在上面的段落中，文本的第一个字母包含在一个 span 元素中。这个 span 元素的宽度是当前字体尺寸的 0.7 倍。span 元素的字体尺寸是 400%，行高是 80%。span 中的字母字体是 "Algerian"
29 </p>
30 
31 </body>
32 </html>
    View Code

    5创建水平菜单

     1 <html>
 2 <head>
 3 <style type="text/css">
 4 span
 5 {
 6 float:left;
 7 0.7em;
 8 font-size:400%;
 9 font-family:algerian,courier;
10 line-height:80%;
11 }
12 </style>
13 </head>
14 
15 <body>
16 <p>
17 <span>T</span>his is some text.
18 This is some text. This is some text.
19 This is some text. This is some text. This is some text.
20 This is some text. This is some text. This is some text.
21 This is some text. This is some text. This is some text.
22 This is some text. This is some text. This is some text.
23 This is some text. This is some text. This is some text.
24 This is some text. This is some text. This is some text.
25 </p>
26 
27 <p>
28 在上面的段落中，文本的第一个字母包含在一个 span 元素中。这个 span 元素的宽度是当前字体尺寸的 0.7 倍。span 元素的字体尺寸是 400%，行高是 80%。span 中的字母字体是 "Algerian"
29 </p>
30 
31 </body>
32 </html>
    View Code

    6创建无表格的首页，即用于创建全部网页布局

     1 <html>
 2 <head>
 3 <style type="text/css">
 4 div.container
 5 {
 6 100%;
 7 margin:0px;
 8 border:1px solid gray;
 9 line-height:150%;
10 }
11 div.header,div.footer
12 {
13 padding:0.5em;
14 color:white;
15 background-color:gray;
16 clear:left;
17 }
18 h1.header
19 {
20 padding:0;
21 margin:0;
22 }
23 div.left
24 {
25 float:left;
26 160px;
27 margin:0;
28 padding:1em;
29 }
30 div.content
31 {
32 margin-left:190px;
33 border-left:1px solid gray;
34 padding:1em;
35 }
36 </style>
37 </head>
38 <body>
39 
40 <div class="container">
41 
42 <div class="header"><h1 class="header">W3School.com.cn</h1></div>
43 
44 <div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>
45 
46 <div class="content">
47 <h2>Free Web Building Tutorials</h2>
48 <p>At W3School.com.cn you will find all the Web-building tutorials you need,
49 from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
50 <p>W3School.com.cn - The Largest Web Developers Site On The Net!</p></div>
51 
52 <div class="footer">Copyright 2008 by YingKe Investment.</div>
53 </div>
54 
55 </body>
56 </html>
    View Code

    7我们都知道的是，如果调整盒子中使用了float属性的图片，自然图片周围的文本会随着图片的变化而发生一些改变。看到网上有博主说在盒子模型中如果外容器使用相对定位，然后盒子中的图像使用绝对对定位，这种布局下调整图像的大小不会影响盒子中文本的变化，但是我测试了各主流浏览器后发现情况并不是这样，不建议盒子中的图像使用绝对定位，因为这样文本很可能会被覆盖隐藏一部分。，文本“这是一个关于float的例子”由于图片的存在被隐藏覆盖了好多。如果把文字放在标签<p></p>中进行分开处理的话会发现图片和文字的顶端不在同一水平线上，所以建议大家不要轻易给内容器图像加绝对定位，也不要把文字和图片分成不同的子集。个人测试总结，如有不全面的地方欢迎讨论。

    浮动的应用就先写到这里，下面到了浮动的清除了~　在说清除浮动的方法之前，大家先思考一个问题：“浮动从何而来？为什么要不遗余力的清除？”大家回过头看第二段，“由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。”所以，如果一个父元素只包含浮动元素，那么他的高度就为0，如果父元素不包含任何可见背影的话，当然我们是看不到的。当存在块级元素自动扩展来适应浮动元素时，在浮动元素周围的两个段落间会出现非自然的空白转行，这就是我们所要清除浮动的原因。

    　　关于清除 CSS的clear属性必是当仁不让。clear属性规定元素的那一侧不允许其他浮动元素。如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。clear属性见下表：有必要声明一下的是所有浏览器都支持clear属性，但是低版本的IE浏览器不支持inherit属性值，但高版本IE11就完全没有问题了~这一点和float属性相同，也算是“难兄难弟”了~

    　　清除浮动的方法有很多，但由于跨浏览器，书写实用性等原因，性价比最高的莫过于给父级div定义 伪类:after和room了~ 为什么呢，因为IE8和非IE浏览器都支持:after,

    　通过添加一对空的div标签，然后再利用clear；both属性清除浮动，这样父级div就能够获取高度了　。IE的专有属性zoom可以很好的解决IE6和IE7的浮动问题。so ,建议大家使用如下代码：

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .left{float: left; 20%;height: 200px;background: #0044DD}
        .right{float: right; 70%;height: 80px;background: #AFD400}
        .div1{background: #cc0000;border: 1px solid #000000;height: 200px}
        .div2{background: #00A5FF;border:1px solid #ff0000;height: 100px;}
    </style>
</head>
<body>
<div class="div1">
    <div class="left">float left</div>>
    <div class="right">float right</div>
</div>
<div class="div2">The second div</div>
</body>
</html>
    1 .clearfd:after{content:"200B";display:block;height:0;clear:both;}
2 .clearfd{zoom:1;}

    还有一些其他的问题比如如果浮动内的元素比浮动本身宽的话，会造成浮动内的元素伸出的情况，这样的话，我们大可用overflow:hidden来隐藏多出来的部分。如果碰到3像素问题（挨着浮动元素的文本会减少3像素）这样的话我们可以直接给文本设置宽度和高度就可以避免受浮动元素的影响了。

    　　才疏学浅，字里行间难免纰漏，如有解释的不明白或者我个人理解有错误的地方，欢迎郢正~

    注：float部分代码借鉴W3school~

    　　

    　　

    　　

    　　

    欢迎关注微信公众号：“花栗鼠的红松树” 知乎专栏：“花栗鼠的红松树” 知乎： 卓怡 https://www.zhihu.com/people/zhuoyisun/activities
  • 相关阅读:
    springmvc介绍
    mybatis中的动态sql应用
    mybatis中表的关联
    mybatis分页
    聚类评估指标系列(二)：准确率和F值
    混淆矩阵，准确率，召回率，F-score，PR曲线，ROC曲线，AUC
    聚类评估指标系列(一)：标准化互信息NMI计算步骤及其Python实现
    numpy.where() 用法详解
    互信息Mutual Information
    转：Prewitt算子、Sobel算子、canny算子、Lapacian算子
  • 原文地址：https://www.cnblogs.com/s-z-y/p/4427941.html
Copyright © 2011-2022 走看看