HTML中的元素浮动

浮动

作用：大多数情况下，就是用来让元素横向排列，做一些水平布局

表现：浮动可以使一个元素向其父元素的左侧或则右侧移动

设置方法： float：none，left，right

none，默认值，元素默认在标准流(文档流/普通流)中排列

left，元素会立即脱离标准流(文档流/普通流)，向页面的左侧浮动

right，元素会立即脱离标准流(文档流/普通流)，向页面的右侧浮动

浮动的特点：

1·元素设置浮动以后，会完全脱离文档流，不在占用文档流的位置

2·设置浮动以后元素会向其父元素的左侧或右侧移动

3·浮动元素默认不会从父元素移出

4·浮动元素向左或者向右移动时不会超过它前边的其他浮动元素

5·如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移

6·浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高

7·浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围

    <style>
.right{height: 100px;width: 100px;background-color: yellow;float: right;
}
.left{height: 100px;width: 100px;background-color: red;float: left;
}
.block{height: 200px;width: 200px;background-color: green;
}</style>
</head>
<body><div class="right">右浮动</div><div class="left">左浮动</div><div class="block">我是块级元素，浮动元素不影响我在文档流中的位置</div>
</body>
</html>

注意：

1.在浮动流中是不区分元素类型的（块级或行内），只要设置了浮动，所有元素性质都一致，都可以设置宽高，和标准流中的行内块级元素很像。

HTML中的元素浮动相关推荐

ie6中容器内浮动元素的border边框不完全显示的bug
ie6中容器内浮动元素的border边框不完全显示的bug html <div class="hrListBox"> <div class=&qu ...
php元素浮动会产生哪些影响,元素浮动的影响与三列布局的实现原理——2019年9月4日22时30分...
一.元素浮动造成父元素高度折叠同一个块元素中,子级元素浮动,会造成附骥元素的高度折叠,包裹不住子级元素. 网页实际效果展示消除子元素浮动的影响实例 html> 清除浮动的影响 .box1 { ...
DIV CSS布局中绝对定位和浮动用法
转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...
CSS定位网页中的元素
relative相对定位偏移设置:left.right.top.bottom 值单位:px 元素的规律: 相对定位元素的规律设置相对定位的盒子会相对它原来的位置通过指定偏移,到达新的位置. 设置相 ...
HTML浮动导致高度塌陷,HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法（高度欺骗）...
元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...
html自适应_web前端入门到实战：HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法...
元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...
php元素浮动会产生哪些影响,css浮动带来什么问题
css浮动带来的影响:1.由于浮动元素脱离了文档流,所以父元素的高度无法被撑开,影响了与父元素同级的元素:若没有给父元素设置高度,那么父元素就不会在显示屏上显示.2.浮动元素不再占用原文档流的位置,它 ...
子元素浮动，父元素高度为0现象解释和原理浅见
有的人在写页子的时候常常会碰见这样的一个问题,就是有一个父级的div下面有子元素,子元素浮动起来后,父元素的高度变成0,撑不起来父级了. 现在先不说解决办法,先说下float属性,float定义:fl ...
父元素浮动子元素会浮动吗_为什么quot;overflow:hiddenquot;能清除浮动的影响
来源 | https://www.jianshu.com/p/7e04ed3f4bea 我们都知道"overflow:hidden"可以溢出隐藏,即当内容元素的高度大于其包含块的高 ...

HTML中的元素浮动

HTML中的元素浮动相关推荐

最新文章

热门文章