[css] float 浮动不上去？

自从用了display:flex之后，就不太用float，最近在写一个样式的时候偶然用到了float，但没想到整了一个大乌龙。

目标样式是：右边固定宽度，左边宽度自适应

于是写下如下代码：

    <div class="wrap"><div class="left"></div><div class='right'></div></div>

    .wrap {width: 500px;border: black 1px solid;position:absolute;}.right {float: right; width: 100px;height: 100px;background: red;}.left {height: 100px;margin-right: 100px;background: yellow;}

得到结果并不对

又尝试调整了一下宽度和margin-right和父元素的定位方式之后仍然不对，所以我的脑子中充斥着 '怎么float不上去呢',一度时期怀疑float是不是变了。

直到。。。我发现被浮动的是right，left独占一行，right就算脱离文档流也和left没关系，所以正确的写法就是换一下样式或者标签顺序就可以完成目标样式。

[css] float 浮动不上去？相关推荐

CSS Float(浮动)
2019独角兽企业重金招聘Python工程师标准>>> 什么是CSS Float(浮动)? CSS的Float(浮动),元素可以围绕其他元素向左或向右被推动 Float(浮动),往往 ...
对css float 浮动的学习心得
css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...
html中左浮动怎么写,div css float浮动用法(left right)
div+css中float认识及css float用法,DIV CSS float浮动知识用法与float浮动教程篇 Css样式的float浮动属性,用于设置标签对象(如: 标签盒子.标签.标签.标签 ...
php浮动边框设置属性,CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
html float属性6,CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
CSS float浮动布局
CSS float浮动布局 1. 清除浮动 2. 浮动边界 3. 浮动转换 4. 形状浮动控制环绕模式 5. 改变元素的显示区域属性值选项说明 left 向左浮动 right 向右浮动 non ...
（12）css—float浮动样式
一.什么是浮动? 浮动是一种非常重要的布局属性. 属性名:float,漂流.浮动的意思. 属性值:left 左浮动 right 右浮动作用:让元素脱离标准流,同一级的浮动的元素可以并排在一排显示. ...
CSS float浮动的深入研究、详解及拓展一一一一一一一一
我们使用float浮动做了很多其本职工作以外的事情,于是我们会混淆,我们会回看不清float真正的面目.浮动真正的意义在哪里呢?要知道这个问题的答案很简单,假设现在CSS中没有浮动(float)属性, ...
CSS Float(浮动详解)
什么是 CSS Float(浮动)? CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像,但它在布局时一样非常有用. 最早是为了让w ...
CSS float浮动的深入研究、详解及拓展(二)
为什么80%的码农都做不了架构师?>>> 接上回- 五.浮动的非本职工作浮动的本职工作是让匿名inline boxes性质的文字环绕图片显示,而其他所有用浮动实现的效果都不是 ...

[css] float 浮动不上去？

[css] float 浮动不上去？相关推荐

最新文章

热门文章