html 浮动

博客介绍了HTML中块元素和行内元素的特点,以及display属性不同值的作用,如inline、block、inline-block等。还阐述了浮动的特性、清除浮动的方法和原因,以及overflow属性的显示方式。最后对比了inline-block和float的异同,有助于解决页面布局问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

块元素:

         1、可设置宽高

         2、默认占用整行

         行内元素:

         1、设置宽高不起作用

         2、元素大小和内容大小相同

         3、宽高度由内容撑开

         4、水平放置,如果放置不下自动换行

         display:

         - 设置元素的框类型

         可选值:

         inline:将元素设置为内联元素;

         -行内元素的默认状态

         

         如果将inline使用在块元素中,则宽高消失,独占一行也消失,大小由内容撑开

         block:可以将元素设置为块状元素

         -块级元素的默认值

         -如果将block使用在行内元素中,则可以设置宽高

         -如果不设置宽高,默认独占一行

         inline-block:可将元素设置为行内块

          - 水平放置,而且可以设置宽高

          - 行内元素设置为inline-block,则可以设置宽高

          - 块元素设置 inline-block,则水平放置

          - 水平放置元素后默认存在间距,解决方法

          1、设置元素margain 为负值

          2、设置html字体大小为0,但后续元素需要设置字体大小

        display:none

        -隐藏元素,并位置不保留

        visibility: hidden

        -隐藏元素,位置保留

知识点:

           - 浮动

           描述:

           - 元素默认在页面中的最底层,称为文档流

           - 文档流特点:

             1、块元素

                默认占整行,垂直排列

                可设置宽高

             2、行内元素

                元素大小和内容大小相同

                水平放置,放置不下自动换行

           - 如果想让元素水平排列,则可以让元素脱离文档流

           - 使用float属性设置为非none,则元素脱离文档流  

           

            float属性:

               可选值:left:元素左浮动

                      right:元素右浮动

                      none:不浮动(默认值,元素在文档流中)

            -浮动特性

             1、设置元素的float属性值为非none,则元素脱离文档流

             2、当元素脱离文档流紧跟着的下面的兄弟元素会自动上移。(影响布局)

             3、元素浮动后,会向左上或右上移动,直到遇到父元素或浮动的兄弟元素的边框,停靠在该位置

             4、如果浮动元素上面右未浮动的块元素,则浮动元素不会超出块元素

             5、块状元素浮动后,默认宽度消失(不设置宽度时),默认占整行消失,宽度为设置的值

             6、行内元素浮动后,可设置宽高

             7、浮动元素如果一行放置不下,会自动换行

             8、浮动元素不会超过它上面的兄弟元素,最多并排

             9、浮动元素不会覆盖文本和图片,文本会环绕显示  

        

清除浮动

        描述:

        -  - 清除浮动元素对当前元素的影响,本身能够继续设置浮动

              - 属性:

                clear:

                可选值: left:左浮动对当前元素影响

                        right:左浮动对当前元素影响

                        both: 清除两侧浮动对当前元素的影响,以影响最大的为主      

       

        both:清楚两侧浮动的影响,以影响大的为准

 描述:

          - 在文档流中,如果没有设置高度,则父元素的宽度为auto,高度由子元素撑开

          - 当子元素设置浮动,则子元素会脱离文档流,此时子元素则无法撑开父元素,导致父元素高度塌陷

          - 如果父元素塌陷,则父元素下的兄弟元素会上移,导致布局混乱

          解决方法:

          - 空div+清除浮动防止塌陷

          - 父元素设置高度防止塌陷

          - 父级添加overflow属性

          overflow:hidden

          - 使用自定义伪类

/*

          同时解决塌陷和传递问题

          */

          .clearfix::after,.clearfix::before{

            content: "";

            display: table;

            clear: both;}

知识点:

              - overflow

         描述:

             - 当子元素的大小超过父元素,则可通过overflow属性设置显示方式

             overflow:visiable:超出部分显示(默认值)

                       hidden:超出部分隐藏

                       auto:隐藏部分出现水平或垂直滚动条

                       scoll:呈现水平和垂直滚动条

inline block 和float 区别

相同点:

        都可以让元素水平放置,解决页面布局问题

        不同点:

        inline-block:

         -位置方向不可控制,会出现默认空格

         -IE 6、IE 7上不支持

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值