html-css:浮动_清除浮动
1.浮动
清除浮动之前我们首先需要了解为什么要清除浮动
1. 假设我们有一个父盒子,不设置高度,其高度有内部子盒子的大小自动撑开,这样是完全可行的,因为有时候我们并不想直接固定死父盒子的大小,而是根据子盒子的大小变化
2. 但是有一个问题: 如果我们给子盒子加了浮动,加了浮动的盒子脱离了标准流,而父盒子还是属于标准流,而且父盒子没有设置高度,就导致父盒子的上下边框合并在一起变成一条线
2. 清除浮动
1. 额外标签法(添加额外标签,语义化差)
在最后一个浮动的子元素的后面添加一个标签,标签的样式需要有
clear:both属性且必须是块元素
2. overflow:hidden(代码简洁,无法显示溢出的子盒子)
通过给父盒子添加样式
overflow:hidden样式来触发BFC实现清除浮动
3. 伪元素(结构语义化正确)
通过父元素添加
:after伪元素并设置相关样式来清除浮动
4. 双伪元素(太麻烦了)
伪元素的加强版
5. 父亲元素添加h5样式
通过给父盒子添加样式
display: flow-root;样式来触发BFC实现清除浮动
推荐使用第五种,我也是喜欢使用这种简单方便
html-css:浮动_清除浮动的更多相关文章
- CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性
最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里 ...
- 【转】CSS清除浮动_清除float浮动
CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ...
- CSS清除浮动_清除float浮动
2.clear:both清除浮动为了统一样式,我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“</div>”结束前加此di ...
- css用clearfix清除浮动
本文从http://www.studyofnet.com/news/196.html复制. 本文导读:写css 时总为浮动而烦恼,如果用了浮动,浮动的父层不会跟着浮动框的高度增加而增加,在Fire ...
- css 浮动和清除浮动
在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动 ...
- 【转】CSS中的浮动和清除浮动
以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...
- [Web 前端] CSS篇之2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法
cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时 ...
- 浅谈css中浮动和清除浮动带来的影响
有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不 ...
- CSS浮动与清除浮动(overflow)例子
在css中浮动与清除浮动功能是我们开发中常用到的一个功能了,下面小编来为各位分析关于CSS浮动与清除浮动(overflow)例子吧． float脱离文本流,可是为什么文字却会有环绕的效果,这点实在是神 ...
随机推荐
- swoole(6)Task异步任务
一:什么是task进程? task进程是独立与worker进程的一组进程 ,他主要处理耗时较长的业务逻辑,并且不影响worker进程处理客户端的请求.worker进程通过task()函数把数据投递到 ...
- YAML语法使用，JSR303数据校验
YAML YAML是 "YAML Ain't a Markup Language" (YAML不是一种置标语言)的递归缩写 # yaml配置 server: prot: YAML语 ...
- HTML5前期学习准备（一）
HTML简介 1.html的基本概念 HTML:HyperTextMarket language,超文本标记语言(所谓"超文本"就是指页面内可以包含图片.链接,甚至音乐.程序等非文 ...
- mysql从5.5升级到5.7遇到的坑
在安装mysql5.7时很顺利安装完成,但在启动项目时报错: [Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clau ...
- Idea - 常用基础配置
前言 IntelliJ IDEA是我们开发常用的一大神器,深得众程序猿青睐,但是在使用过程中,有一些默认设置我们使用起来并不是很友好...这里就记录一些我使用的配置. 1.多行显示同时打开的多个文件 ...
- Vue2.0 【第三季】第1节 propsData Option 全局扩展的数据传递
目录 Vue2.0 [第三季]第1节 propsData Option 全局扩展的数据传递 第1节 propsData Option 全局扩展的数据传递 Vue2.0 [第三季]第1节 propsDa ...
- const 详解
简单分类: 常变量 const 类型 变量名 或者 类型 const 变量名 常引用 const 类型& 引用名 ...
- MySQL 【教程二】
MySQL 创建数据表 创建MySQL数据表需要以下信息: 表名 表字段名 定义每个表字段 语法 以下为创建MySQL数据表的SQL通用语法: # CREATE TABLE table_name (c ...
- 0402数据放入集合进行查询-Java(新手)
JDBC工具类: package cn.Wuchang.zyDome; import java.sql.*; public class JDBCUtils { private static final ...
- Python——项目-小游戏2-动画绘制
实现游戏循环还有事件的监听 在上一讲中 你需要完成这样的这样的效果, 如果你还没有完成,请不要继续往下阅读!!切记切记切记.,重要的事情说三遍 我们来看一下什么是游戏循环 所谓的游戏循环很好的理解 就 ...