플로트 청소의 방법과 장점 및 단점은 무엇입니까?-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

플로트 청소의 방법과 장점 및 단점은 무엇입니까?

一个新手

Sep 23, 2017 am 10:23 AM

장점과 단점어느방법

왜 플로트를 클리어해야 하나요?

다음 예시는 요소에 float를 적용한 효과입니다

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <style type="text/css">
        .box1 {            
        width: 100px;            
        background: #999;        
        }
        .box2 {            
        width: 100px;            
        height: 40px;        
        }
        .box3 {            
        width: 100px;            
        height: 40px;            
        background-color: #333;        
        }
    </style></head><body>
    <p class="box1">
        <p class="box2"></p>
    </p>
    <p class="box3"></p></body></html>

box2에 float: left 속성을 추가한 결과는 다음과 같습니다

그림과 같이 box1이 높이를 설정하지 않았기 때문에 box3이 자동으로 공간을 채웁니다. 이 경우 페이지가 엉망이 됩니다. 따라서 이 float를 지워야 합니다

다음은 float를 지우는 여러 가지 방법입니다

(1)clear:both

floating 요소 아래에 p 태그를 추가하고clear:both 속성

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <style type="text/css">
        .box1 {            
        width: 100px;            
        background: #999;        
        }
        .clear {            
        clear: both;        
        }
        .box2 {            
        width: 100px;            
        height: 40px;            
        float: left;        
        }
        .box3 {            
        width: 100px;            
        height: 40px;            
        background-color: #333;        
        }
    </style></head><body>
    <p class="box1">
        <p class="box2"></p>
        <p class="clear"></p>
    </p>
    <p class="box3"></p></body></html>

장점: 간단함, 코드가 적고 브라우저 지원이 좋음
단점: 의미 없는 태그 추가

(2) 오버플로: 숨김

플로팅 요소의 상위 요소에 오버플로: 숨겨진 속성을 추가하여 플로트를 지웁니다.

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <style type="text/css">
        .box1 {            
        width: 100px;            
        background: #999;        
        }
        .clear {            
        overflow: hidden;            
        zoom: 1;   /*处理兼容性问题*/
        }
        .box2 {            
        width: 100px;            
        height: 40px;            
        float: left;        
        }
        .box3 {            
        width: 100px;            
        height: 40px;            
        background-color: #333;        
        }
    </style></head><body>
    <p class="box1 clear">
        <p class="box2"></p>
    </p>
    <p class="box3"></p></body></html>

장점: 간단하고 코드가 적으며, 좋은 브라우저 지원
단점: 과도한 내용은 숨겨짐

(3) 뒤에 의사 클래스 추가

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <style type="text/css">
        .box1 {            
        width: 100px;            
         background: #999;        
         }
        .clear:after {            
        clear: both;            
        content: "";            
        display: block;     
         visibility: hidden;        
         }
        .box2 {            
        width: 100px;            
        height: 40px;            
        float: left;        
        }
        .box3 {            
        width: 100px;            
        height: 40px;            
        background-color: #333;        
        }
    </style></head><body>
    <p class="box1 clear">
        <p class="box2"></p>
    </p>
    <p class="box3"></p></body></html>

장점: 좋은 브라우저 지원
단점: 코드가 많다

세 번째 방법은 현재 많은 브라우저에서 사용하는 방법입니다. 따라서 플로트를 지울 때는 이후 의사 클래스를 사용하는 것이 가장 좋습니다

위 내용은 플로트 청소의 방법과 장점 및 단점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

选购系统前必看：Win11和Win10优缺点分析Mar 28, 2024 pm 01:33 PM

在当今信息时代，个人电脑作为我们日常生活中不可或缺的工具，扮演着重要的角色。操作系统作为电脑的核心软件之一，更是影响着我们的使用体验以及工作效率。在市场上，微软公司的Windows操作系统一直占据着主导地位，而现在人们面临的选择则是最新的Windows11和旧有的Windows10。对于普通消费者来说，在选择操作系统时并不只是看版本号，更要了解其优缺点。

模板化的优点和缺点有哪些？May 08, 2024 pm 03:51 PM

模板化：优点与缺点模板化是一种强大的编程技术，允许您创建可重复使用的代码块。它提供了一系列优点，但也存在一些缺点。优点：代码重用性：模板化使您可以创建通用代码，可在整个应用程序中重用，从而减少重复和维护工作。一致性：模板化确保代码段在不同位置以相同的方式实现，从而提高代码一致性和可读性。可维护性：对模板的更改会同时反映在所有使用它的代码中，简化了维护和更新过程。效率：模板化可以节省时间和精力，因为您不必重复编写相同的代码。灵活性：模板化允许您创建可配置的代码块，可轻松适应不同的应用程序需求。缺点

Java Servlet的工作原理有什么优缺点？Apr 16, 2024 pm 03:18 PM

JavaServlet是一种Java类，用于构建动态网页，作为客户端和服务器的桥梁。工作原理：接收请求、初始化Servlet、处理请求、生成响应和关闭Servlet。优点：可移植、可扩展、安全和易于使用。缺点：开销、耦合和状态管理。实战案例：创建一个简单的Servlet来显示"Hello,Servlet!"消息。

命名Java变量时使用中文的优点和缺点Feb 18, 2024 am 10:14 AM

使用中文命名Java变量的优缺点在Java编程中，我们通常使用英文来命名变量、方法和类等标识符。然而，有时候我们也可以考虑使用中文作为标识符的一部分。本文将探讨使用中文命名Java变量的优缺点，并给出一些具体的代码示例。优点一：提高代码可读性使用中文命名Java变量可以使代码更易理解和阅读。毕竟，我们的大脑对于中文的理解和识别要比英文更为自然和流畅。对于非英

PHP框架的优缺点比较：选哪个好？Jun 04, 2024 pm 03:36 PM

PHP框架的选择取决于项目需求和开发者技能：Laravel：功能丰富，社区活跃，但学习曲线陡峭，性能开销高。CodeIgniter：轻量级，易于扩展，但功能有限，文档较少。Symfony：模块化，社区强大，但复杂，性能问题。ZendFramework：企业级，稳定可靠，但笨重，许可昂贵。Slim：微框架，速度快，但功能有限，学习曲线陡峭。

Golang编译器汇总：探究各类编译器优缺点Jan 19, 2024 am 10:44 AM

随着Golang的发展，越来越多的编译器被开发出来。在选择一款编译器时，开发人员需要考虑诸多因素，例如可靠性、性能、易用性等。本篇文章将汇总一些常见的Golang编译器，并探究它们的优缺点，帮助开发者更好地选择适合自己的编译器。Go官方编译器Go官方编译器是Golang的默认编译器，也是Golang社区中被广泛认可的编译器。它具有以下优点：稳定性好体积小编译

C语言与Python：适用场景及优缺点分析Mar 22, 2024 am 11:24 AM

C语言与Python：适用场景及优缺点分析在计算机编程领域，C语言与Python是两种非常流行的编程语言，它们各自有着独特的优势和劣势，适用于不同的场景。本文将对C语言与Python进行深入分析，探讨它们的适用场景以及优缺点。一、C语言适用场景：C语言是一种面向过程的编程语言，具有高效性和优秀的性能，适合开发需要高度控制和效率的系统软件、驱动程序和嵌入式系统

固态硬盘与机械硬盘的比较Feb 26, 2024 pm 06:21 PM

固态硬盘和机械硬盘的优缺点近年来，固态硬盘（SSD）逐渐走入大众视野，并在个人电脑、服务器等领域得到广泛应用。相较之下，机械硬盘（HDD）作为传统存储设备也在可靠性和性价比方面有着优势。本文将就固态硬盘和机械硬盘的优缺点进行比较分析，帮助读者更好地选择适合自己需求的存储设备。首先，固态硬盘在读写速度方面具有明显优势。由于SSD采用闪存储存介质，读写速度较快，

See all articles