zoukankan      html  css  js  c++  java
  • 设置float后,后面的元素位置问题。

    这个主要看后面这个元素是块级元素还是行级元素。如果后面的元素是块级元素。例如

    <style>
            #one{
                height:50px;
                100px;
                float: left;
                background-color: red;
            }
            #two{
                height:150px;
                350px;/*这个宽度不够大会把#two中的字挤下去*/
              
                background-color: yellow;
            }
        </style>
    

      

    <ul>
    <li id=“one”>first</li>
    <li id="two">second</li>
    </ul>
    

     

     显然,li是块级元素,如果给第一个li也就是id为one的设置了float,#two的li会占据#one li的位置,但是字不会重叠。#two中的字会跟在#one中字的后面排列出来如图1所示,(注意:如果#two的宽度不够大的话,字会被挤到下一行,如图2所示,)

    如果后面的元素是行级元素的话,在给第一个元素设置float后,后一个元素不会占据前一个元素的位置。而是乖乖的跟在屁股后面。例如:

            #one{
                height:50px;
                100px;
                float: left;
                background-color: red;
            }
            #two{
            /*因为span标签是行级元素,所以没有给他设置宽高*/
                background-color: yellow;
            }
    <div id="one">first</div>
    <span id="two">second</span>
    

      效果如图3所示,。如果给span标签设置成display:block,使他变成块级元素的话,就和前面举得li的例子道理一样了。

    总结:今天在做一个img和span标签对齐的时候无意中发现了这个问题。自己记录下来加深印象,也方便以后查阅。希望对初学者有所帮助。

  • 相关阅读:
    路由相关题目解析
    Centos7.6系统安装
    组播(二)---IGMP
    那些瞬间击中我的句子
    组播(一)
    记一次安装浪潮服务器的经历
    HP打印机驱动安装方法总结
    潍坊矿场ubuntu18 server 基本环境配置常用操作
    docker-zabbix
    MySQL 8.x 账号管理
  • 原文地址:https://www.cnblogs.com/SoundOfTheSea/p/7403423.html
Copyright © 2011-2022 走看看