• <var id="zvtmq"></var>
      <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

      <font id="zvtmq"></font>

      <tt id="zvtmq"></tt>

        <var id="zvtmq"></var>
        <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

        1. 
          

          <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

            <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
            <strike id="zvtmq"><output id="zvtmq"></output></strike>

          1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

          2. <small id="zvtmq"></small>

            <code id="zvtmq"><rt id="zvtmq"></rt></code>
          3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                  文章导航

                  CSS float浮动

                  2018-8-3 20:44| 作者: admin| 查看: 1082| 评论: 0|来自: 蚂蚁部落

                  float翻译成中文有使物体浮动护着使物体漂浮的作用。

                  ?#22411;?#20026;证:

                  a:3:{s:3:\"pic\";s:43:\"portal/201808/29/141156wzu2r5pim3ttsubs.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  现在我们就可以想象一下物体浮动的状态,进而引申到一个div元素浮动是什么样的状态。

                  当然浮动不是完全自由的,需要遵循一定的规则,本文就是用来介绍CSS中浮动的规则。

                  一.浮动的必要性:

                  如果有两个div元素,想要使其呈现左右布局,如果没有浮动,将非常麻?#24120;?#27604;如使用position定位方式,那如果在调整浏览器窗口大小等操作的时候,可能会出现意想不到的情况。如果使用浮动将会非常轻松的实现预期效果。还有一个常见的文本环绕图片效果,文章后面会有介绍。

                  二.CSS浮动的使用:

                  float浮动是CSS布局中最为基础且必须要掌握的知识点之一,否则你将是一个前端局外人。

                  语法结构:

                  [CSS] 纯文本查看 复制代码
                  float:none | left | right

                  参数解析:

                  (1).none:规定不浮动。

                  (2).left:规定元素向左浮动。

                  (3).right:规定元素向右浮动。

                  代码实例如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css"> 
                  .box{ 
                    width:300px; 
                    height:200px; 
                    background-color:#000; 
                  } 
                  .ant{ 
                    width:100px; 
                    height:100px; 
                    background-color:#ff6a00; 
                  } 
                  </style> 
                  </head> 
                  <body> 
                  <div class="box"> 
                    <div class="ant"></div> 
                  </div> 
                  </body> 
                  </html>

                  上面代码中,两个div元素都没有浮动,两个元素都会位于它们各自父元素的左上角(暂且不考虑内外边距)。

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css"> 
                  .box{ 
                    width:300px; 
                    height:200px; 
                    background-color:#000; 
                  } 
                  .ant{ 
                    width:100px; 
                    height:100px; 
                    background-color:#ff6a00;
                    float:right; 
                  } 
                  </style> 
                  </head> 
                  <body> 
                  <div class="box"> 
                    <div class="ant"></div> 
                  </div> 
                  </body> 
                  </html>

                  上面代码中,子div元素设置为右浮动,那么它会尽量向?#31227;?#28014;,知道遇到它的包含框。

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css">
                  div {
                    width:80px;
                    height:80px;
                    background:green;
                    margin:10px;
                    float:right;
                  }
                  </style> 
                  </head> 
                  <body> 
                    <div></div>
                    <div></div>
                  </body> 
                  </html>

                  两个块级元素默认是各自占据一?#23567;?/p>

                  关于块级元素可以参阅CSS块级/内联元素一章节。

                  上述代码中,两个div采用了,它们就可以位于同一?#23567;?/p>

                  前面代码中讲过,浮动元素浮动直到遇到包含框,其实浮动元素碰到另一个浮动元素?#19981;?#20572;止浮动。

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css">
                  div {
                    height:80px;
                  }
                  .ant-float {
                    width:80px;
                    background:green;
                    float:left;
                  }
                  .ant {
                    width:100px;
                    background:red;
                  }
                  </style> 
                  </head> 
                  <body> 
                  <div class="ant-float"></div>
                  <div class="ant"></div>
                  </body> 
                  </html>

                  对元素施加浮动之后,元素会脱离文档流,恰如起名,真正的浮动起?#30784;?/p>

                  那么它们原来占据的?#21344;?#23601;会被看腾空,它后面的元素就会填补这个?#21344;洌?#19978;述代码中ant-float元素浮动起来,它后面的ant元素会填补它原来占据的?#21344;洹?/p>

                  三.浮动元素对内联元素或者块级元素影响:

                  内联元素在默?#29486;?#24577;下,是不可以设置尺寸的。

                  对其施加浮动,内联元素会被转换为内联块级元素,这?#26412;?#21487;以对齐设置元素尺寸,或者正确的设置上下内外边距。

                  代码实例如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css">
                  a {
                    float:left;
                    width:100px;
                    height:100px;
                    line-height:100px;
                    background-color:#ccc;
                    text-align:center;
                  }
                   
                  </style> 
                  </head> 
                  <body> 
                  <a href="#">蚂蚁部落</a>
                  </body> 
                  </html>

                  再来看一段代码实例:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css">
                  div {
                    float:left;
                    height:100px;
                    line-height:100px;
                    background-color:#ccc;
                  }
                   
                  </style> 
                  </head> 
                  <body> 
                  <div>蚂蚁部落</div>
                  </body> 
                  </html>

                  默?#29486;?#24577;下,块级元素如果不规定宽度,默认是100%,添加浮动之后,它能够实现宽度自?#35270;Α?/p>

                  四.文本环绕图片:

                  实现文本环绕图片功能的代码非常的简单,但是里面还是涉及到不少的内容。

                  所以详细内容可以参阅CSS文本环绕图片一章节。

                  1

                  鲜花

                  握手

                  雷人

                  路过

                  鸡蛋

                  刚表态过的朋友 (1 人)

                  最新评论

                  返回顶部
                1. <var id="zvtmq"></var>
                    <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                    <font id="zvtmq"></font>

                    <tt id="zvtmq"></tt>

                      <var id="zvtmq"></var>
                      <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                      1. 
                        

                        <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                          <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                          <strike id="zvtmq"><output id="zvtmq"></output></strike>

                        1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                        2. <small id="zvtmq"></small>

                          <code id="zvtmq"><rt id="zvtmq"></rt></code>
                        3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                快乐10分破解如何计算
                              1. <var id="zvtmq"></var>
                                  <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                  <font id="zvtmq"></font>

                                  <tt id="zvtmq"></tt>

                                    <var id="zvtmq"></var>
                                    <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                    1. 
                                      

                                      <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                        <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                        <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                      1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                      2. <small id="zvtmq"></small>

                                        <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                      3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                            1. <var id="zvtmq"></var>
                                                <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                                <font id="zvtmq"></font>

                                                <tt id="zvtmq"></tt>

                                                  <var id="zvtmq"></var>
                                                  <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                                  1. 
                                                    

                                                    <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                                      <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                                      <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                                    1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                                    2. <small id="zvtmq"></small>

                                                      <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                                    3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                                            围棋怎么下 头条彩票官网首页 双色球机选爱彩网 黑龙江时时彩图表 2019年004期码报资料 极速快乐十分开奖结果查询 陕西快乐十分卖到几点 湖北十一选五直选遗漏 湖北快三号码走势 手机彩票软件哪个正规 河南11选5分布走势图 最精准的一码中特资料 今天南粤风彩26选5 电子游艺白菜大全 摇钱树论坛单双中特