div标签清除float浮动样式方法

方法一、

这个方法来源于positioniseverything ，通过after伪类实现，完全兼容当前主流浏览器。

 1 <style type="text/css">2 .clearfix:after {3     content: ".";4     display: block;5     height: 0;6     clear: both;7     visibility: hidden;8 }9 .clearfix {display: inline-block;}  /* for IE/Mac */
10 </style>
11 <!-- main stylesheet ends, CC with new stylesheet below... -->
12 <!--[if IE]>
13 <style type="text/css">
14 .clearfix {
15     zoom: 1;            /* triggers hasLayout */
16     display: block;     /* resets display for IE/Win */
17 }
18 /* Only IE can see inside the conditional comment
19 and read this CSS rule. Don't ever use a normal HTML
20 comment inside the CC or it will close prematurely. */
21 </style>
22 <![endif]-->

方法二、

还有一个无敌的清除浮动的样式，这个是通过独立的代码来清除的。

 1 html body div.clear,2 html body span.clear3 {4     background: none;5     border: 0;6     clear: both;7     display: block;8     float: none;9     font-size: 0;
10     margin: 0;
11     padding: 0;
12     overflow: hidden;
13     visibility: hidden;
14     width: 0;
15     height: 0;
16 }

可以通过在页面div中添加clear样式来清除页面中的浮动。

1 <div class=”clear”>
2 </div>
3 或
4 <span class=”clear”>
5 </span>

方法三、

实际项目中常用如下代码：

1 .clear:after {
2     clear: both;
3     content: " ";
4     display: block;
5     height: 0;
6     overflow: hidden;
7     visibility: hidden;
8 }

使用方法如下：

1 <div class="clear">
2     <div class="title">标题<div>
3     <div class="content">内容</div>
4 </div>

转载于:https://www.cnblogs.com/whiterock/p/7229183.html

div标签清除float浮动样式方法相关推荐

CSS清除浮动清除float浮动
一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 1.背景不能显示由于浮动产生,如果对父级设置了(CSS b ...
CSS:盒子模型和清除float浮动的三种常用方法
目录一:浮动产生原因: 二:浮动产生副作用: 三:浮动解决方法: QUESTION:CSS盒子模型清除浮动? ANSWER: 一:浮动产生原因: 一般浮动是什么情况呢?一般是一个盒子里使用了CSS ...
清除float浮动的几种方法
2019独角兽企业重金招聘Python工程师标准>>> float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动 ...
CSS清除浮动_清除float浮动
CSS清除浮动方法集合一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. ...
（12）css—float浮动样式
一.什么是浮动? 浮动是一种非常重要的布局属性. 属性名:float,漂流.浮动的意思. 属性值:left 左浮动 right 右浮动作用:让元素脱离标准流,同一级的浮动的元素可以并排在一排显示. ...
子div用了float浮动之后，如何撑开父元素，让父元素div自动适应高度的问题
方法一: html: <div id="all1"><div id="left1">1</div><div id=&q ...
CSS样式 float浮动用法
CSS样式 float浮动用法前言 Css样式的float浮动属性,用于设置标签对象(如:<div>标签盒子.<span>标签.<a>标签.<em>标 ...
2022-03-03 html网页布局练习(二):使用float浮动+html5新增标签进行网页布局
设计图 https://s3.bmp.ovh/imgs/2023/02/10/f04eca2ec8533891.jpg 页面构成和思路页面由头部header+轮拨图banner+选项卡片sectio ...
什么是 HTML div标签以及如何使用 CSS 设置样式
HTML 分割标记,简称为"div",是一种特殊元素,可让您在网页上将相似的内容集组合在一起.您可以将其用作关联相似内容的通用容器. 标签是最常用的div标签之一,尽管引入了语义元 ...
html如何布局div标签,用Div标签进行网页布局
一.插入Div标签可以通过手动插入Div标签并对它放们应用CSS定位样式来创建页面布局.要添加Div标签,将插入点放置在要显示Div标签的位置,选择[插入]>[布局对象]>[Div标签] ...

div标签清除float浮动样式方法

div标签清除float浮动样式方法相关推荐

最新文章

热门文章