zoukankan      html  css  js  c++  java
  • html浮动小问题

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    ul,li{margin:0;padding:0}
    ul{border:3px solid black;}
    li{width:100px;height:100px;list-style: none;background:blue;}
    .li1{width:80px;background:red;float: left;}
    .clearfix:after{display: block;content:'';clear:both}
    </style>
    </head>
    <body>
    <ul>
    <li class="li1"></li>
    <li class="li2">1234567890</li>
    </ul>
    </body>
    </html>
     
    1.同级关系下,li1浮动,li2不浮动,就会导致li2元素跑到li1下面,但是li2里面的内容会被挤开,
    证明了浮动是半脱离文档流的,所以同级关系尽量都浮动
    2.同级都浮动的情况下,如果父级没有给高度,
    那么父级元素会因为没有内容撑开自身,而导致页面出问题。
      解决方法:
           a.直接在父级加一个 overflow:hidden
           b.在子级同级再写一个块元素,然后给块元素加上 clear:both
           c.在style里自己添加个伪类.clearfix,
            .clearfix:after{display: block;content:'';clear:both}
           然后把这个类作为class写在父级上
           d.给父级加上高度,也能解决
      这四个方法都能解决浮动带来的问题
    3.浮动默认把行内元素转为块元素
  • 相关阅读:
    OpenCV程序在生产环境中运行
    C#调用C++导出(dllexport)方法
    IIS7.5 GZip配置
    wcf学习笔记--初识wcf
    Greenplum installation guide
    Cloudera 5.8.2 Installation guide
    WPF DataGrid 合并单元格
    wpf DataGrid CheckBox列全选
    WPF button 圆角制作
    WPF passwordbox 圆角制作
  • 原文地址:https://www.cnblogs.com/wxiaoyu/p/9484424.html
Copyright © 2011-2022 走看看