zoukankan      html  css  js  c++  java
  • 清除浮动的影响

    前言:网上有很多很好的例子,我这里只是记下自己的理解和感悟

    先看下浮动:

    代码:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>第一种</title>
     6     <style>
     7         #box {
     8             border: solid;
     9         }
    10 
    11         .con {
    12             float: left;
    13             width: 100px;
    14             height: 100px;
    15         }
    16 
    17         .con1 {
    18             background: red;
    19         }
    20 
    21         .con2 {
    22             background: green;
    23         }
    24 
    25         .con3 {
    26             background: blue;
    27         }
    28     </style>
    29 </head>
    30 <body>
    31 <div id="box">
    32     <div class="con con1"></div>
    33     <div class="con con2"></div>
    34     <div class="con con3"></div>
    35 </div>
    36 </body>
    37 </html>

    效果:

    如图,子元素跑到父级元素外面去了(大逆不道 !)

    下面我就替天行道,

    劝说:(不常用)

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>第一种</title>
     6     <style>
     7         #box {
     8             border: solid;
     9         }
    10 
    11         .con {
    12             float: left;
    13             width: 100px;
    14             height: 100px;
    15         }
    16 
    17         .con1 {
    18             background: red;
    19         }
    20 
    21         .con2 {
    22             background: green;
    23         }
    24 
    25         .con3 {
    26             background: blue;
    27         }
    28 
    29         .clear {
    30             clear: both;
    31         }
    32     </style>
    33 </head>
    34 <body>
    35 <div id="box">
    36     <div class="con con1"></div>
    37     <div class="con con2"></div>
    38     <div class="con con3"></div>
    39     <div class="clear"></div>
    40 </div>
    41 </body>
    42 </html>

    效果:

    告诉他们父亲:(难以实现下面图片的效果,头像溢出了,隐藏就没了╮(╯▽╰)╭)

    代码:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>第一种</title>
     6     <style>
     7         #box {
     8             border: solid;
     9             overflow: hidden;
    10         }
    11 
    12         .con {
    13             float: left;
    14             width: 100px;
    15             height: 100px;
    16         }
    17 
    18         .con1 {
    19             background: red;
    20         }
    21 
    22         .con2 {
    23             background: green;
    24         }
    25 
    26         .con3 {
    27             background: blue;
    28         }
    29 
    30     </style>
    31 </head>
    32 <body>
    33 <div id="box">
    34     <div class="con con1"></div>
    35     <div class="con con2"></div>
    36     <div class="con con3"></div>
    37 </div>
    38 </body>
    39 </html>

     直接硬扛:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>第一种</title>
     6     <style>
     7         #box {
     8             border: solid;
     9             zoom: 1;
    10             /*处理兼容*/
    11         }
    12 
    13         #box:after{
    14             clear: both;
    15             content: ".";
    16             display: block;
    17             width: 0;
    18             height: 0;
    19             visibility: hidden;
    20         }
    21 
    22         .con {
    23             float: left;
    24             width: 100px;
    25             height: 100px;
    26         }
    27 
    28         .con1 {
    29             background: red;
    30         }
    31 
    32         .con2 {
    33             background: green;
    34         }
    35 
    36         .con3 {
    37             background: blue;
    38         }
    39 
    40     </style>
    41 </head>
    42 <body>
    43 <div id="box">
    44     <div class="con con1"></div>
    45     <div class="con con2"></div>
    46     <div class="con con3"></div>
    47 </div>
    48 </body>
    49 </html>
  • 相关阅读:
    Eclipse配置Go语言开发环境(GoEclipse)
    Maven项目设置JDK版本
    PowerDesigner16下载和破解
    Ubuntu安装JDK配置环境变量
    IIS配置文件的XML格式不正确 applicationHost.config崩溃 恢复解决办法
    Android Studio中文注释提示编码问题,Gradle: 警告:编码 GBK 的不可映射字符的方法...
    Android Studio 编译异常Could not execute build using Gradle installation解决办法
    Android Studio 导入第三方JAR编译正常,但运行时调用不了问题的解决方案
    Android Studio添加第三放JAR后无法编译问题解决方案
    Eclipse打不开,提示: An error has occurred. see the log file解决办法
  • 原文地址:https://www.cnblogs.com/chenluomenggongzi/p/5919443.html
Copyright © 2011-2022 走看看