float浮动定位

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float浮动定位</title>
<style>
div{
width:100px;
height:100px;
border:1px #000000 solid;
}
.div1{
background:darkred;
}
.div2{
background:green;
/*float:left;
margin-left:10px;*/
/*float浮动的位置只能用margin去调*/
}
.div3{
background:royalblue;
}
/*#box div*/.div1,.div2,.div3{
float:left;/*水平方向定位left\right\none*/
}
/*#box{
width:306px;
}*/
/*三个子元素div的总宽度+border,如果宽度不够，子元素浮动是上不去的*/
.text{
width:400px;
height:200px;
}
</style>
</head>
<body>
<h1>你们好吗</h1>
<!--<div id="box">-->
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<!--</div>-->
<h1 style="clear:both"></h1><!--从这开始清除浮动，别对下面的内容有影响，用任何块级元素都可以。或者给浮动的元素加父元素，给父元素加宽高，因为外面的父元素不会浮动起来，如上-->
<div class="text">这节课我们学习浮动的定位，如果用了浮动就会对下面的元素产生影响，如果不想有影响就用以上两种方式清除浮动</div>
</body>
</html>

时间： 2024-10-07 06:42:52

float浮动定位的相关文章

解决float浮动定位时父元素的高度为0的情况

首先我想实现这样一个效果: 我设置一个<div class="content"></div>背景为黄色,然后在其中设置两个div分别为<div class="left"></div> ,<div class="right"></div>分别设置左浮动,背景颜色蓝色和右浮动背景颜色红色代码如下: <!DOCTYPE html><html><head

归纳篇（一）CSS的position定位和float浮动

近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.relative:生成相对定位的元素,相对于其所在普通的文档流位置进行定位: 3.static:默认值,没有定位,元素出现在正常的文档流中; 4.fixed:老IE不支持,和absolute一致,相对于窗口进行定位,当出现滚动条时,不随着滚动而滚动: 5.sticky:(CSS3)有兼

CSS Positioning(定位)与Float(浮动)

一.CSS Positioning(定位) 1.Positioning(定位) CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么.元素可以使用的顶部,底部,左侧和右侧属性定位.然而,这些属性无法工作,除非是先设定position属性.他们也有不同的工作方式,这取决于定位方法.有四种不同的定位方法. 2.Static 定位 HTML元素的默认值,即没有定位,元素出现在正常的流中.静态定位的元素不会受到top, bottom, lef

网站布局之------浮动(float)和定位(position)(绝对定位，相对定位，静态固定定位)，***什么叫脱离文档流？

网站布局之------浮动(float)和定位(position)(绝对定位,相对定位,静态固定定位),***什么叫脱离文档流? @参考文档:http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html @什么叫脱离文档流?注意,只有绝对定位absolute和浮动float才会脱离文档流! 答案:CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位. ---部分无视和完全无视

float浮动，定位

1 浮动定位    1.普通流定位        普通流,由称为文档流        块级元素:从上到下一个一个的排列        行内元素:一行内从左到右的排列    2.浮动定位        2.1.什么是浮动定位        将元素排列在普通流之外,即脱离文档流        浮动元素不会占据页面空间        浮动元素会放置在"包含框"的左边或右边        浮动元素依旧位于包含框之内        浮动元素可以向左或向右浮动,知道碰见包含框的边缘或另一个已浮动的

CSS定位机制之浮动定位float

一.浮动定位实现的效果 二.使用float实现浮动定位 三.使用clear属性清除浮动定位 四.浮动定位的应用(布局) 一.浮动定位实现的效果 (一).块元素(div)在文档流中默认垂直排列,如果希望块元素在页面中水平排列,可以使块元素脱离文档流(使用float使元素浮动) 元素浮动脱离文档流之后,原有的位置不会保留,会被其他文档流元素占据. (二). 当设置了浮动定位后(float属性非none的值),元素会立即左上或右上浮动,而浮动元素会盖住文档流元素.如图一所示,框1设置浮动之后脱离文档流

js页面滚动时层智能浮动定位实现:

案例展示: 第一个:每个人都有看过的淘宝页面: 案例就不多说了,有兴趣的可以多去找找, 这样的智能浮动效果还是不错的,挺方便. 基本的实现原理: 首先有一个默认状态就是没有滚动的时候,什么事情也不用做,定位可以是absolute,也可以是stati,fixed,relartive 这些都可以.我们主要需要关注的是当浏览器滚动的时候,(要浮动的块)要移除浏览器界面视区的时候,修改其position属性,让其浮动在窗口的上沿显示就可以了.最好的position属性就是fixed了,可以在IE6+和其

css浮动定位到底什么鬼？

实际操作浮动的时候经常出现一头雾水的情况,趁着写博客理一理: 所谓浮动定位也就是定义一个元素相对于它本来的位置出现在哪里.以下几点是浮动定位中需要记住的: 1.浮动会先将元素在正常文档流中删除,但是该元素依然影响布局.例如,relative的元素原来所占的空间还在. 2.浮动元素的外边距始终不变. 3.元素被浮动后首先生成一个块级框,然后为自己指定一个包含块. 4.浮动的原则有:float之间不覆盖:边界来自包含块:float之间顺着排:尽可能挤一挤:尽可能顶一顶: 5.超出包含块的方法:使用负

css定位之浮动定位

浮动定位可以是原本垂直排列的块级元素,变成水平排列 1浮动元素 float:left 或者float:right  这些浮动会直接碰到父容器的边界为止. 2设置了浮动的元素,元素会脱离标准文档流中,但是元素内容会仍然占据文档流中的空间 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float定位</title