浮动布局和定位布局为css中布局的常用的两种布局方式,而且兼容性会比较好。随着flex的流行,以后会是主流,新的东西好用,兼容不太好。IE10以下不兼容flex布局。

float布局会脱离文档流,对页面的布局造成影响,比如造成父级的高度坍塌等问题。清除浮动后,便不会影响文档流。下面介绍一下现在清除浮动的一些方式。


一、父级添加overflow: hidden;

   子元素浮动了,会造成父元素的高度坍塌。只要给父元素添加overflow: hidden;属性,就可以解决浮动带来的影响。

<ul class="cc">
<li></li>
<li></li>
</ul>
<style type="text/css">
li {
list-style: none;
height: 100px;
width: 100px;
float: left;
background: red;
margin-left: 20px;
} ul {
overflow: hidden;
padding: 0;
margin: 0;
background: pink;
}
</style>

二、通过属性clear:both;达到清除浮动的目的;

  元素浮动后,只需要在浮动元素添加多一个块级元素,并添加clear: both;属性,便可以达到清除浮动的目的。

<style type="text/css">
li {
list-style: none;
height: 100px;
width: 100px;
float: left;
background: red;
margin-left: 20px;
}
ul{
background: pink;
}
</style>
<ul class="cc">
<li></li>
<li></li>
<div style="clear: both;"></div>
</ul>

三、通过给父级元素添加伪类after,达到清除浮动的目的;

  这种方式也是使用clear: both;的方式达到效果,只是变相的使用了伪类after,使得页面结构更简洁,也是常用的清理浮动的方式。

<style type="text/css">
li {
list-style: none;
height: 100px;
width: 100px;
float: left;
background: red;
margin-left: 20px;
} .cc:after {
content: '';
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}
ul{
background: pink;
}
</style>
<ul class="cc">
<li></li>
<li></li>
</ul>

四、使用双伪类;

  此方式和三原理一样,代码更简洁。

<style type="text/css">
li {
list-style: none;
height: 100px;
width: 100px;
float: left;
background: red;
margin-left: 20px;
} .cc:after,
.cc:before {
content: "";
display: block;
clear: both;
} ul {
background: pink;
}
</style>
<ul class="cc">
<li></li>
<li></li>
</ul>

  

css_清除浮动的4种方式的更多相关文章

  1. css考核点整理(一)-浮动的理解和清除浮动的几种方式

    浮动的理解和清除浮动的几种方式 clear语法:clear : none | left | right | both 取值:none : 默认值.允许两边都可以有浮动对象left : 不允许左边有浮动 ...

  2. 【css】清除浮动的几种方式

    [css]清除浮动的几种方式   因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...

  3. 前端老司机常用的方法CSS如何清除浮动?清除浮动的几种方式

    在前端开发过程中,我们经常会使用到浮动(float),这个我们即爱又恨的属性.爱,是因为通过浮动,我们能很方便地进行布局:恨,是因为浮动之后遗留下来太多的问题需要解决.下面本篇文章给大家介绍CSS清除 ...

  4. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  5. css清除浮动的两种方式(clearfix和clear)

    最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都 ...

  6. CSS清除浮动的几种方式

    浮动对页面的影响: 如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0, 下面的元素会自动补位,所以这个时候要进行浮动的清除 ...

  7. css清除浮动的3种方式

    前言: 当不给父元素设置宽高时,父元素的宽高会被子元素的内容撑开.但当子元素设置浮动属性(float) 后, 子元素会溢出到父元素外,父元素的宽高也不会被撑开,这称之为“高度塌陷”.可以理解为使用浮动 ...

  8. 【CSS】清除浮动的五种方式

    清除浮动是一件功德无量的事情23333 这里记录一下清除浮动的多种方式 *首先要明确的是,为什么要清除浮动? A 影响其他元素定位 父盒子高度为0,子盒子全部浮动.定位,子盒子不会撑开父盒子,下面的元 ...

  9. css浮动产生和清除浮动的几种方式

    浮动的语法:float:left/right; 浮动float的原本设计了作用初衷是为了实现文字环绕效果 浮动产生负作用: 1.背景不能显示 2.边框不能撑开父元素 3.margin padding设 ...

随机推荐

  1. java实现函数指针

    在Java程序员面试笔试宝典中看到的东西,感觉很有用,特开此文 函数指针一般作为函数的参数来使用,开发人员在使用是可以根据自己的需求传递自动以的函数来实现指定的功能,例如,在实现排序算法时,可以通过传 ...

  2. linux 批量更改文件名 rename 命令

    rename 的典型应用: # rename $1 $2 $3# $1: 要被取代的關鍵字# $2: 新的關鍵字# $3: 檔名符合這個規則的才取代 # 把 IMG001.jpg, IMG002.jp ...

  3. office 格式刷双击无法启用连刷模式

    1.问题所在是双击被设置太快了导致office无法接受,请设置成下图中的中等速度即可. 2.可使用快捷键代替 Ctrl+Shift+c(复制格式)Ctrl+Shift+v(粘贴格式)

  4. XML外部实体(XXE)注入详解

    ###XML与xxe注入基础知识 1.XMl定义 XML由3个部分构成,它们分别是:文档类型定义(Document Type Definition,DTD),即XML的布局语言:可扩展的样式语言(Ex ...

  5. JMH 使用指南 - java 性能测试

    JMH 篇 JMH,即Java Microbenchmark Harness 翻译:java 微基准测试 工具套件.## 1.添加依赖```<dependency> <groupId ...

  6. Spring MVC+Spring+Mybatis+MySQL(IDEA)入门框架搭建

    目录 Spring MVC+Spring+Mybatis+MySQL(IDEA)入门框架搭建 0.项目准备 1.数据持久层Mybatis+MySQL 1.1 MySQL数据准备 1.2 Mybatis ...

  7. Java虚拟机性能监控与调优

    1 基于JDK命令行工具的监控 1.1 JVM的参数类型 1.1.1 标准参数 在JVM的各个版本基本上保持不变,很稳定的. -help -server -client -version -showv ...

  8. Python 爬虫入门(一)

    毕设是做爬虫相关的,本来想的是用java写,也写了几个爬虫,其中一个是爬网易云音乐的用户信息,爬了大概100多万,效果不是太满意.之前听说Python这方面比较强,就想用Python试试,之前也没用过 ...

  9. 搭建web.py

    输入以下命令:盘符切换:   >>d: >>D:\LYFLYFLYF\python\web.py-0.37 >>python setup.py install 出现 ...

  10. python 资产扫描01

    本地建立的三个文件: Asset1.txt 用来保存扫描到的资产 Asset2.txt 用来导入给定的资产 Repeat.txt 保存重复的资产 程序的功能: 1.资产扫描,以 位置:资产 格式保存到 ...