css float 的使用

float

float 属性定义元素在哪个方向浮动

left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

注意float没有top 和bottom 属性,输入设置了,会没有效果.

inherit

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style>body{margin: 0;}.main{width: 200px;height: 200px;background: #DD28A0;float: right;}.main2{width: 200px;height: 200px;background: #00d8a0;float: inherit;}</style><body><div class="main"><div class="main2"></div> </div></body>
</html>

例如main2 的父布局就是main 所以他们 float一样那么元素就会重叠在一起

当然有时候是元素位于右边也可以使用绝对定语,

position: absolute;
right: 0;

css float 的使用相关推荐

CSS Float(浮动)
2019独角兽企业重金招聘Python工程师标准>>> 什么是CSS Float(浮动)? CSS的Float(浮动),元素可以围绕其他元素向左或向右被推动 Float(浮动),往往 ...
css float left right 中间空间城数据无法显示
css float left right 中间空间城数据无法显示是由于设定了width具体值太小造成,简单用%值或不设置. 转载于:https://www.cnblogs.com/allensun- ...
对css float 浮动的学习心得
css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...
教你玩转CSS Float（浮动）
目录什么是 CSS Float(浮动)? 元素怎样浮动彼此相邻的浮动元素清除浮动 - 使用 clear CSS 中所有的浮动属性什么是 CSS Float(浮动)? CSS 的 Float(浮 ...
html中左浮动怎么写,div css float浮动用法(left right)
div+css中float认识及css float用法,DIV CSS float浮动知识用法与float浮动教程篇 Css样式的float浮动属性,用于设置标签对象(如: 标签盒子.标签.标签.标签 ...
html图片浮动教程,CSS Float（浮动）
CSS Float(浮动) 什么是 CSS Float(浮动)? CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像,但它在布局时一 ...
php浮动边框设置属性,CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
多列网页布局CSS float 属性和 CSS Clear 属性
CSS float 属性 CSS float 属性用于设计多列网页布局.如果你想设计两列或三列的网页布局,你必须在float 属性的帮助下浮动你的 div 元素. div 标签是块级元素,因此,div ...
html float属性6,CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
CSS Float布局过程
使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...

css float 的使用

css float 的使用相关推荐

最新文章

热门文章