HTML clearfix清除浮动讲解

一、浮动的概念

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

二、浮动的影响

1. 浮动会导致父元素高度坍塌

父元素中有子元素，并且父元素没有设置高度，子元素在父元素中浮动，结果必然是父元素的高度为0，这也就导致了父元素高度塌陷问题。

浮动脱离文档流，这个问题会对整个页面布局带来很大影响，如何解决高度坍塌问题，我们需要清除浮动。

三、浮动的清除

1. clear属性的空标签

在浮动元素后添加一个空标签

<div class="clear"></div>

，并且在CSS中设置

.clear{clear:both;}

即可清理浮动。

  • 原理：添加一个空标签，利用CSS提高的clear:both清除浮动，让父元素可以自动获取到高度
  • 优点：简单，代码少，兼容所有浏览器
  • 缺点：增加页面的标签，造成结构的混乱
  • 建议：不推荐使用，此方法已经过时

2. :after伪元素

给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素之后添加一个看不见的块元素（Block element）清理浮动。

  • 原理：通过CSS伪元素在容器的内部元素之后添加一个看不见的空格“/20”或点“.” ，并且设置clear属性清除浮动。
  • 优点：浏览器支持较好
  • 缺点：clearfix这个class需要添加zoom: 1（触发haslayout），才能支持IE6和IE7浏览器
  • 建议：推荐使用，设置公共类，减少CSS代码

到此这篇关于HTML clearfix清除浮动讲解的文章就介绍到这了,更多相关HTML clearfix清除浮动内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 一篇文章弄懂PHP和HTML的嵌套写法

    一篇文章弄懂PHP和HTML的嵌套写法

    目录 1.1全部php生成结构 1.2html中嵌套php 1.3博客项目 1.3.1前后台 1.3.2项目开发流程 1.3.3创建数据库和表 1.3.4添加博客类别 1.3.5显示所有的博客类别 1.3.6实现博客类别编辑功能 1.3.6.1a标签传值 1.3.6.2点击更新按钮实现更新功能 总结 1.1全部php生成结构 1.2html中嵌套php 总结如下: html和php混写规则: php代码必须包在<?php ?> html中写php也是同理,但是有值输出必须加上echo 1.3博

  • HTML 绝对路径与相对路径概念详细

    HTML 绝对路径与相对路径概念详细

    路径指文件存放的位置,在网页中利用路径可以引用文件,插入图像.视频等.表示路径的方法有两种:相对路径,绝对路径.以下讨论均是在HTML环境下进行. 相对路径 相对路径是指目标相对于当前文件的路径,网页结构设计中多采用这种方法来表示目标的路径.相对路径有多种表示方法,其表示的意义不尽相同.表示方法如下: ./ :代表文件所在的目录(可以省略不写) ../ :代表文件所在的父级目录 ../../ :代表文件所在的父级目录的父级目录 / :代表文件所在的根目录 值得注意的是,(/ :代表文件所在的根目

  • Java SQL注入案例教程及html基础入门

    Java SQL注入案例教程及html基础入门

    目录 一,SQL注入 –1,需求 –2,测试 –3,总结 二,练习PreparedStatement –1,需求 –2,测试 –3,制作工具类 三,HTML –1,概述 –2,入门案例 –3,使用工具 –4,测试 四,测试常用标签 一,SQL注入 –1,需求 –1,利用jdbc查询user的信息,如果信息正确就登录,否则提示错误 –1,创建user表,指定字段id name password,并添加数据 –2,通过jdbc查询user表的数据,根据用户名和密码查 –2,测试 package cn

  • JavaScript中html画布的使用与页面存储技术详解

    JavaScript中html画布的使用与页面存储技术详解

    目录 一.JavaScript使用html中的画布 二.页面存储技术 一.JavaScript使用html中的画布 1.画布:页面中用于绘制图形的特殊区域 2.绘制图形的过程 (1)创建画布:使用html5中画布标签 <canvas id="id" width="宽度" height="高度"> </canvas> (2)JavaScript中获取画布 document.getElementById('id') (3)准备

  • scrapy+flask+html打造搜索引擎的示例代码

    scrapy+flask+html打造搜索引擎的示例代码

    目录 1.预备知识 2.抓取CSDN数据接口 2.1 查看CSDN搜索引擎主页 2.2测试CSDN搜索引擎的功能 2.3查看更多相关文章的信息 2.4抓取ajax异步请求数据 2.5 分析url地址 3. 使用scrapy爬取CSDN数据接口 3.1 start_requests 3.2使用parse函数提取数据 3.3保存成CSV文件 3.4 运行结果 4. 效果展示 4.1 flask后端展示 4.2 效果展示 1.预备知识 python语言,scrapy爬虫基础,json模块,flask后

  • php将word转换为html格式代码分析

    PHP将上传word文件,转化为Html格式,(多种转换方式) 1.通过PHPOffice 1: composer require phpoffice/phpword /* 通过composer安装 PHPOffice 需要科学上网 或者用中国镜像:https://www.phpcomposer.com/ */ 2: 安装成功可看到 vendor文件夹 3: 使用方法 : require 'vendor/autoload.php'; $phpWord = \PhpOffice\PhpWord\I

  • html form表单基础入门案例讲解

    html form表单基础入门案例讲解

    目录 一,表格标签 –1,概述 –2,总结 二,表单标签 –1,测试 –2,总结 –3,form提交数据 三,form表单的练习 四,CSS -1,概述 -2,语法 -3,入门案例 五,选择器 总结 一,表格标签 向网页中加入表格 –1,概述 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 表格标签</title> </head&g

  • 教你如何从 html 实现一个 react

    教你如何从 html 实现一个 react

    什么是 React React是一个简单的javascript UI库,用于构建高效.快速的用户界面.它是一个轻量级库,因此很受欢迎.它遵循组件设计模式.声明式编程范式和函数式编程概念,以使前端应用程序更高效.它使用虚拟DOM来有效地操作DOM.它遵循从高阶组件到低阶组件的单向数据流. 前言

  • HTML clearfix清除浮动讲解

    HTML clearfix清除浮动讲解

    一.浮动的概念 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 二.浮动的影响 1. 浮动会导致父元素高度坍塌 父元素中有子元素,并且父元素没有设置高度,子元素在父元素中浮动,结果必然是父元素的高度为0,这也就导致了父元素高度塌陷问题. 浮动脱离文档流,这个问题会对整个页面布局带来很大影响,如何解决高度坍塌问题,我们需要清除浮动. 三.浮动的清除 1. clear属性的空标签 在浮

  • JS中使用 after 伪类清除浮动实例

    以前清除浮动的时候总是在想要清除浮动的元素后面添加 <div style="clear:both;"></div> 或者写在br标签里面来解决,但这样会增加无语义的标签,下面是用after伪类实现,兼容多种浏览器 .clearfix:after{ content:""; display:block; height:0; clear:both; visibility:hidden; } 为兼容IE6,IE7,因为ie6,ie7不能用after伪

  • CSS清除浮动方法汇总

    清除浮动 //IE浏览器 .clearfloat{ zoom:1 } //其他浏览器 .clearfloat ; after{ display:bloak; clean:both; content:""; visibility: hidden; height:0 }

  • CSS清除浮动常用方法小结

    常用的清除浮动的方法有以下三种.      此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景. Left Right [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 1.使用空标签清除浮动.我用了很久的一种方法,空标签可以是div标签,也可以是P标签.我习惯用<P>,够简短,也有很多人用<hr>,只是需要另外为其清除边框,但理论上可以是任何标签.这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清楚浮动,并为其定义CSS代码:clear:b

  • 对于IE7、FF、OP清除浮动的最优方法第1/2页

    对于IE7、FF、OP清除浮动的最优方法第1/2页

    在CSS森林群里讨论一个margin的问题中无意间发现overflow也可以用来清除浮动,嘿嘿,这个方法不单使用简单,而且FF.OP.IE7都支持,从此可以告别那又长兼容性又差的FF清浮动的方法了. 方法真的很简单,只要为需要清浮动的标签加上overflow这个属性.  css代码 复制代码 代码如下: ul{ list-style:none; height:auto; margin:0;p adding:0; background-color:#436973; } li{ float:left

  • 一个老外弄的Clearing floats(清除浮动的方法)

    我常用的都是clear:both;方法,如 <div style="clear:both">    <div style="float:left"></div>   <div style="float:right"></div> </div> 今在PlanABC看到另外这种方法,特些记录下来. div.container {  border: 1px solid #00000

  • html清除浮动的6种方法示例

    使用display:inline-block会出现的情况: 1.使块元素在一行显示2.使内嵌支持宽高3.换行被解析了4.不设置的时候宽度由内容撑开5.在IE6,7下步支持块标签 由于inline-block属性换行的时候被解析(有间隙)故解决方法使用浮动float:left/right 使用浮动时出现的情况: 1.使块元素在一行显示2.使内嵌元素支持宽高3.不设置不宽高的时候宽度由内容撑开4.换行不被解析(故使用行内元素的时候清除间隙的方法可以使用浮动)5.元素添加浮动,会脱离文档流,按照指定的

  • css别忘记清除浮动clear:both

    用空标签清除 .clr {clear: both;} <div id="layout">     <div id="left">Left</div>     <div id="right">Right</div>     <p class="clr"></p> </div>使用 overflow 属性 #layout {overfl

  • Bootstrap中CSS的使用方法

    Bootstrap中CSS的使用方法

    Bootstrap 使用了一些 HTML5 元素和 CSS 属性,所以需要使用 HTML5 文档类型. <!DOCTYPE html> <html lang="zh-CN"> ... </html> 为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示: <meta name="viewport" content=&quo

  • js 获取元素的具体样式信息getcss(实例讲解)

    如果想获取元素的某一个具体的样式属性值 1.元素.style.属性名 需要我们把元素的样式都写在行内样式上才可以(写在样式表中是不管用的) console.log(box.style.height)  ->null 在真实项目中,这种方式不常用,因为不能为了获取值而把所有的样式都写在行内(无法实现html和css的分离) 2.使用window.getComputedStyle(当前操作的元素对象,当前元素的伪类[一般我们不用伪类写null])这个方法获取所有经过浏览器计算过的样式 所有经过浏览器

随机推荐