Web前端基础(五):清浮动方法与优缺点

2024-08-26 20:48

本文主要是介绍Web前端基础(五):清浮动方法与优缺点,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1、如何对待美工

  • 对于靠谱美工,美工图精确度约0px。
  • 对于不靠谱的美工,要与产品经理沟通,并用邮件往来。

2、浮动对文档的影响

  • 浮动会导致当前元素脱离文档流,此时会对父级产生影响;
  • 子元素浮动,父级元素会出现高度为0的现象,这个现象叫做高度塌陷;

3、清浮动的方法:

3.1 需要清浮动的情况:

  • 子标签浮动后,父标签的高度无法被撑开,所以需要清浮动;
  • 新加入的标签,希望不受之前浮动元素的影响,则需要清浮动;

3.2 清浮动方法:

  • 1、子元素浮动,父级元素也浮动;
  • 2、给空标签设置属性clear: both;
    不允许有浮动;例:
    这里写图片描述这里写图片描述
    放在要清除的最末尾;
  • 3、br标签清浮动
    为br标签设置属性——clear=”all” 即可
  • 4、给父级标签设置 overflow: hidden/ auto ;
    • hidden:超出内容隐藏。
    • auto:默认属性,在需要时剪切内容并添加滚动条;超出时显示滚动条。
  • 5、after伪元素清浮动
    原理:替代空标签,相当于用一个高度宽度为0的块代替空标签
    例:这里写图片描述

4、清浮动方法优缺点辨析

4.1 子元素浮动,父级元素也浮动

  • 优点:不存在结构和语义化问题,代码量少;
  • 缺点:使得与父元素相邻的元素的布局会受到影响。

4.2 空标签设置属性clear: both

  • 优点:通俗易懂,容易掌握;
  • 缺点:会添加大量无语义空标签,结构与表现未分离,不利于维护。

4.3 给父级标签设置 overflow: hidden/ auto

  • 优点:不存在结构和语义化问题;
  • 缺点:
    • hidden——>内容增多时候容易造成不会自动换行,导致内容被隐藏,无法显示需要溢出的元素。
    • auto——>多个嵌套后,有些情形下会造成内容全选;IE中mouseover造成宽度改变时会出现最外层模块的滚动条。

4.4 after伪元素清浮动

  • 优点:结构和语义化完全正确;
  • 缺点:复用方式不当会造成代码量增加。

4.5 br标签清浮动

  • 优点:比空标签方式语义稍强,代码量较少;
  • 缺点:结构与表现未分离。

这篇关于Web前端基础(五):清浮动方法与优缺点的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1109649

相关文章

Java 中的 @SneakyThrows 注解使用方法(简化异常处理的利与弊)

《Java中的@SneakyThrows注解使用方法(简化异常处理的利与弊)》为了简化异常处理,Lombok提供了一个强大的注解@SneakyThrows,本文将详细介绍@SneakyThro... 目录1. @SneakyThrows 简介 1.1 什么是 Lombok?2. @SneakyThrows

判断PyTorch是GPU版还是CPU版的方法小结

《判断PyTorch是GPU版还是CPU版的方法小结》PyTorch作为当前最流行的深度学习框架之一,支持在CPU和GPU(NVIDIACUDA)上运行,所以对于深度学习开发者来说,正确识别PyTor... 目录前言为什么需要区分GPU和CPU版本?性能差异硬件要求如何检查PyTorch版本?方法1:使用命

Qt实现网络数据解析的方法总结

《Qt实现网络数据解析的方法总结》在Qt中解析网络数据通常涉及接收原始字节流,并将其转换为有意义的应用层数据,这篇文章为大家介绍了详细步骤和示例,感兴趣的小伙伴可以了解下... 目录1. 网络数据接收2. 缓冲区管理(处理粘包/拆包)3. 常见数据格式解析3.1 jsON解析3.2 XML解析3.3 自定义

SpringMVC 通过ajax 前后端数据交互的实现方法

《SpringMVC通过ajax前后端数据交互的实现方法》:本文主要介绍SpringMVC通过ajax前后端数据交互的实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价... 在前端的开发过程中,经常在html页面通过AJAX进行前后端数据的交互,SpringMVC的controll

Java中的工具类命名方法

《Java中的工具类命名方法》:本文主要介绍Java中的工具类究竟如何命名,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Java中的工具类究竟如何命名?先来几个例子几种命名方式的比较到底如何命名 ?总结Java中的工具类究竟如何命名?先来几个例子JD

Spring Security自定义身份认证的实现方法

《SpringSecurity自定义身份认证的实现方法》:本文主要介绍SpringSecurity自定义身份认证的实现方法,下面对SpringSecurity的这三种自定义身份认证进行详细讲解,... 目录1.内存身份认证(1)创建配置类(2)验证内存身份认证2.JDBC身份认证(1)数据准备 (2)配置依

python获取网页表格的多种方法汇总

《python获取网页表格的多种方法汇总》我们在网页上看到很多的表格,如果要获取里面的数据或者转化成其他格式,就需要将表格获取下来并进行整理,在Python中,获取网页表格的方法有多种,下面就跟随小编... 目录1. 使用Pandas的read_html2. 使用BeautifulSoup和pandas3.

Spring 中的循环引用问题解决方法

《Spring中的循环引用问题解决方法》:本文主要介绍Spring中的循环引用问题解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录什么是循环引用?循环依赖三级缓存解决循环依赖二级缓存三级缓存本章来聊聊Spring 中的循环引用问题该如何解决。这里聊

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

Pandas统计每行数据中的空值的方法示例

《Pandas统计每行数据中的空值的方法示例》处理缺失数据(NaN值)是一个非常常见的问题,本文主要介绍了Pandas统计每行数据中的空值的方法示例,具有一定的参考价值,感兴趣的可以了解一下... 目录什么是空值?为什么要统计空值?准备工作创建示例数据统计每行空值数量进一步分析www.chinasem.cn处