zoukankan      html  css  js  c++  java
  • float浮动元素性质

    1.浮动的元素脱标

      简单理解为:浮动的元素脱离标准文档流,可以设置宽高,可以并排显示

    2.浮动的元素无margin缺陷

      两个盒子之间的距离是两个margin之和

    3.浮动的元素依次贴边显示

       

    贴边顺序:父盒子内侧 ← 子盒子← 子盒子← 子盒子← 子盒子4。。。。。

    如果前一个盒子剩余的宽度不够,会再前一个贴边。

    浮动的元素不会钻盒子:

    4.浮动的元素让出标准流的位置

       理解:俩个同级的盒子,前面的盒子左浮动,后面的盒子不浮动。浮动的元素会让出标准流的位置。

    5.字围效果

      理解:俩个同级的盒子,前面的盒子左浮动,后面的盒子不浮动。不浮动的盒子里面的文字不会压盖住,会在浮动的盒子周围显示。

    二。浮动元素存在的问题

       问题描述:1.浮动的元素不能撑高父盒子的高度(高度自适应)

                         2 浮动的元素影响后面的元素.

       解决方式:1.给父亲盒子增加高度属性

                             结果描述:高度自适应  (未解决)  

                         2.给父盒子增加clear:both;属性(清除浮动)

                             结果描述:高度自适应  (未解决)  

                        3.(外墙法)在两个盒子之间添加一堵“有高度的”墙

                             结果描述:高度自适应  (未解决)  

                        4.(内墙法)在所有浮动的元素最后添加一堵“清除浮动的”墙.(clear:both)

                               结果描述:问题解决  

                              不可取:增加了一些标签

                          5.overflow属性

                           理解:溢出隐藏处理

                           overflow:auto;溢出滚动:

                           overflow:hidden;溢出隐藏  

                           对父盒子添加overflow属性可以决所有的问题

                             overflow:hidden;两个引申含义:1.强制让父盒子检测内部子盒子元素高度,并且将检测到的高度撑高自身

                                                                                 2.强制让父盒子管理住浮动的元素,不让子盒子影响到其他元素

               总结:同级元素要浮动都浮动,不浮动都不浮动;子盒子浮动,父盒子尽量增加overflow:hidden属性

    转载请注明出处:大宝
  • 相关阅读:
    ActionBarSherlock学习笔记——知识点
    ActionBarSherlock学习笔记——SubMenu
    Android解析xml——pull
    ActionBarSherlock学习笔记——ShareActionProvider
    Listview下拉刷新(顶部刷新)
    ActionBarSherlock学习笔记——SupportActionBar()属性设置
    ActionBarSherlock学习笔记——ActionBar.Tab
    ActionBarSherlock学习笔记——SearchView
    ActionBarSherlock学习笔记——requestWindowFeature
    ActionBarSherlock学习笔记——ActionBar添加View
  • 原文地址:https://www.cnblogs.com/feiyang-dabao/p/9523544.html
Copyright © 2011-2022 走看看