html-css:关于浮动的方式

1.在 The standard flow中内容的高度可以support父元素的高度2.在 The standard flow中浮动的元素can not support父元素的高度
1.清除浮动的方式:给前面一个父元素设置高度notice:在企业开发中能不写就不写高度,这种方式用的很少
清除浮动的第二种方法: 添加clear属性none 默认取值(左浮动找左浮动,右浮动找右浮动)/left (不要找前面的左浮动元素)/right(不要找前面的右浮动元素)/both(不要找前面的左、右浮动元素)Notice:当我们给某个元素添加clear属性之后这个属性的margin属性就会失效。
<head>    <meta charset="UTF-8">    <title>clear attribute</title>    <style>        *{            margin: 0;            padding: 0;        }        .box1{

background-color: red;        }        .box2{            background-color: green;            clear: both;        }        .box1 p{            width: 100px;            background-color: blue;        }        .box2 p{            width: 100px;            background-color: yellow;        }        p{            float:left ;        }    </style></head>
<div class="box1">    <p>秦怡大傻瓜1</p>    <p>秦怡大傻瓜1</p>    <p>秦怡大傻瓜1</p></div><div class="box2">    <p>秦怡大傻瓜2</p>    <p>秦怡大傻瓜2</p>    <p>秦怡大傻瓜2</p></div>


				
时间: 2024-12-24 07:22:57

html-css:关于浮动的方式的相关文章

201510232153_《CSS——去除浮动推荐方式》

/*清除浮动代码*/ .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} .clearfloat{zoom:1} <!--第一个div--> <div class="div1 clearfloat"> <div class="left"> Left </div> <div class

更简洁的 CSS 清理浮动方式

CSS清理浮动有很多种方式,像使用 br 标签自带的 clear 属,使用元素的 overflow,使用空标签来设置 clear:both 等等.但考虑到兼容问题和语义化的问题,一般我们都会使用如下代码来清理浮动. /* 清理浮动 */ .clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; } .clearfix { zoom:1; } 其原

css 清楚浮动的8种方式

清除浮动是每个 web前台设计师必须掌握的机能. css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同一时候会影响到前后标签.父级标签的位置及 width height 属性.并且相同的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了.解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题. 以下总结8种清除浮动的方法(測试已通过 ie chrome firefox opera,后面三种方法仅仅做了解就能够了): 1,父级div定义 height 复

CSS清除浮动的几种方式

浮动对页面的影响: 如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0, 下面的元素会自动补位,所以这个时候要进行浮动的清除(不要在浮动元素上清除浮动),不然浮动会造成父元素高度坍塌,同时浮动会脱离文档流,对整个页面布局有很大的影响 方式一:使用overflow属性来清除浮动 .ovh{ overflow:hidden; } 先找到浮动盒子的父元素,再在父元素中添加一个属性:overflow:hidden,就是清除这个父

CSS.04 -- 浮动float、overflow、定位position、CSS初始化

标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right :  设置浮动的元素,脱离标准流 可能的值 描述 left 元素向左浮动. right 元素向右浮动 none 默认值,元素不浮动,并会显示在其在文本中出现的位置 inherit 规定应该从父元素继承float属性的值   特点:浮动找浮动,不浮动找不浮动 浮动只影响后面的元素 浮动以元素顶部为基准对齐 浮动可是实现模式转换(span设置浮动可以设置宽高 ) 让块级元素在一行

CSS之浮动那些事

1.清除浮动 下面是两种常用的方式,而这两招也够用了(不用千招会,只需一招精). 1.结尾处加空div标签 clear:both <style type="text/css"> .left{float:left;} .right{float:right;} /*清除浮动代码*/ .clearfloat{clear:both} </style> <div> <div class="left">Left</div&g

css清除浮动float的三种方法总结【转载自https://my.oschina.net/leipeng/blog/221125】

摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class="div1">1</div>     <div class="div2">2</div>     <div class="div3

css清除浮动代码实例演示

css清除浮动代码实例演示:在页面中如果采用了浮动,那么清除浮动则是必须要进行的操作,否则可能引起一些意想不到的后果.本章节不会对浮动或者清除浮动的原理做介绍,只是分享一下清除浮动的几段代码,因为有些朋友可能需要的就是一个代码实例,关于浮动或者清除清除浮动的相关内容可以参阅相关阅读.一.使用overflow清除浮动: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <met

css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$(&#39;.float&#39;)

一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class="div1">1</div>     <div class="div2">2</div>     <div class="div3">3</div> </div> 分析CSS代码样

css清除浮动float的三种方法总结

转载地址:https://my.oschina.net/leipeng/blog/221125 css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"> <div class="div1">1</div> <div class="div2">2</