css浮动样式在哪里,css元素的浮动需要注意几点

CSS float浮动布局

属性值

float 是最开始出现的一种布局方式，主要解决：文本在图像周围环绕，也即应用于图像。但是在css中，任何元素都可以浮动， 浮动元素会生成一个块级框 ，而不论它本身是何种元素。

元素一般是处于普通流中，也即块级元素独占一行，从上往下依次显示布局。行级元素可以在一行显示多个，按照顺序进行显示布局。

而添加了 float 布局的元素则会脱离原来所在的文档流。并 ‘漂浮’ 在当前所在的文档流的位置（如果前一个元素没有添加 float 布局的情况下），由于当前元素文档流实际上没有被元素占用，因此当前元素之后的元素会按照普通流布局的方式，占用当前元素的文档流。表现为： 丢失空间

也即：

此时由于第一个元素添加了 float:left ，则脱离了原来的文档流，后面元素会向上移动，占用第一个元素的空间。

如果第二个元素也添加了 float ，那么可以这样去思考，由于第一个元素的原因，第二个元素所处的文档流变成了第一个元素所处的文档流，此时再给第二个元素添加 float ，那么也会像第一个元素一样，脱离当前的文档流，使得当前元素和第一个元素一样处于 '漂浮' 状态，并紧跟着第一个元素显示一排。

同样，如果第二个元素后面还有其他元素，那么也会向上移动，改变原来所处的文档流位置。

注意：添加了 float 的元素，只是在会脱离当前所在的文档流，但是仍然漂浮在当前文档流 上一层 ，而不是说直接脱离整个文档流，跑到所有文档流的最顶部 。

从上面案例可以看出，添加了浮动的元素会影响其后元素的布局。此外由于元素脱离原来的文档流，且父盒子没有添加高度属性，那么父盒子无法感知到子盒子的存在，因此父盒子不会被撑开。

知道了 float 带来的不好的地方，则需要去清除浮动带来的影响。

方法一：采用css clear 属性

将该属性添加在被浮动影响的后面元素，即可以清除浮动

则受浮动影响的元素就可以正常显示了

因此在受浮动影响的父元素，就可以利用此方法，在浮动元素之后新增加一个元素，使新增加的元素清除浮动，这样新增加的元素的位置就在浮动元素的下面，使得在一定程度上实现了撑开盒子的作用。

方法二：BFC

其次还可以采用BFC，使得父元素形成独立的空间，也即可以感知子元素的高度和宽度，在一定程度上也不会影响外面的元素的布局。

浮动元素边界不能超过父元素的padding

元素浮动后会变为块元素包括行元素如 span ，所以浮动后的元素可以设置宽高。

通过形状浮动可以让内容围绕图片，类似于我们在word 中的环绕排版。要求图片是有透明度的PNG格式。

shape-outside 定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。默认情况下，内联内容包围其边框， shape-outside 提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。

理解：使用形状值来定义浮动区域的浮动，这将使得内联内容会环绕着形状，而不是产生浮动的边框。

关键字属性值

函数值属性

url值

文字通过给定的图片，并且通过计算图片的透明度后获取的形状区域进行围绕，这里需要注意的是此效果必须在服务器端预览，本地预览会报图片跨域问题，给定的图片必须是有透明区域的图片

渐变值

按照给定的渐变通过计算排除透明通道后得到的形状，然后文字按照此形状的边缘进行环绕

最后：函数值/url/linear-gradient可以和关键字属性值搭配使用，此时关键字属性作为基本形状提供相应的参考框盒。

clip-path 使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。且此方式原来的区域仍然存在，只是显不显示的问题。裁剪之后只有规定的区域可以显示。

基本语法

其中：

相关问答

Q1: css浮动属性设置在那

Float常跟属性值left、right、none

Float:none 不使用浮动

Float:left 靠左浮动

Float:right 靠右浮动

float语法： 

float : none | left |right

参数值： 

none : 　对象不浮动

left : 　对象浮在左边

right : 　对象浮在右边

Q2: DIY的显示样式的CSS样式在哪里？哪个文件夹

如果想在默认模板上简单的修改、附加扩展css，只需要在你对应的模板套系下手动添加一个对应的扩展css文件就可以了，例如你想修改或者添加common.css中的代码，只需要在自己创建的模板套系目录的对应位置：common文件夹下新建一个extend_common.css文件，然后将自己要修改或者扩展的css代码。将在生成缓存css时，自动追加到默认模板的css文件tmplate/default/common/common.css解析成你当前的模板id缓存文件。

CSS 继承规范：

Discuz! X系列产品中 CSS 文件会在缓存时按照以下顺序进行合并：

template/default/*.css 文件。

当默认模板是非默认模板时，template/模板目录/extend_*.css 文件 或 template/模板目录/*.css。

当某插件启用时，source/plugin/插件目录/template/extend_*.css 文件。

因此非默认模板目录中的 CSS 属性将继承默认模板中的 CSS 属性，插件目录中的 CSS 文件将继承前二者的 CSS 属性。

CSS 自身的集成顺序为：当 CSS 属性名称相同时，CSS 文件中，写在后面的替换前面的代码。

CSS书写规范：

属性写在一行内，属性之间、属性名和值之间以及属性与“{}”之间须有空格，例如：.class { width: 400px; height: 300px; } 。

属性的书写顺序：

位置：position,left,right,float

盒模型属性：display,margin,padding,width,height

边框与背景：border,background

段落与文本：line-height,text-indent,font,color,text-decoration,...

其他属性：overflow,cursor,visibility,...

针对特殊浏览器的属性，应写在标准属性之前，例如：-webkit-box-shadow:; -moz-box-shadow:; box-shaow:;

按照元素模型由外及内，由整体到细节书写，大致分为五组：

谨慎添加新的选择符规则，尤其不可滥用 id，尽可能继承和复用已有样式

选择符、属性、值均用小写（格式的颜色值除外），缩写的选择符名称须说明缩写前的全称，例如 .cl - Clearfix

勿使用冗余低效的 CSS 写法，例如：ul li a span { ... }

慎用 !important

建议使用在 class/id 名称中的词语

表示状态：a-active

表示结构：h-header,c-content,f-footer

表示区域：mn-main,sd-side,nv-navigation,mu-menu

表示样式：l-list,tab,p_pop

常用css实例：

兼容IE浏览器css hack

所有 IE浏览器适用：

.ie_all .foo { ... }

IE6 专用：

.ie6 .foo { ... }

IE7 专用：

.ie7 .foo { ... }

IE8 专用：

.ie8 .foo { ... }

浮动样式及浮动元素父元素高度自适应样式代码：

.z/.y 浮动 left/right .z { float: left; } .y { float: right; }

.cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .cl { zoom: 1; }

大标题字体：

.wx, .ph { font-family: "Microsoft YaHei", "Hiragino Sans GB", STHeiti, Tahoma, SimHei, sans-serif; font-weight: 100; }

外边距样式：

.mtn { margin-top: 5px !important; }

.mbn { margin-bottom: 5px !important; }

.mtm { margin-top: 10px !important; }

.mbm { margin-bottom: 10px !important; }

.mtw { margin-top: 20px !important; }

.mbw { margin-bottom: 20px !important; }

文字字体大小：

.xs0 { font-family: {SMFONT}; font-size: {SMFONTSIZE}; -webkit-text-size-adjust: none; }

.xs1 { font-size: 12px !important; }

.xs2 { font-size: 14px !important; }

.xs3 { font-size: 16px !important; }

内边距样式：

.ptn { padding-top: 5px !important; }

.pbn { padding-bottom: 5px !important; }

.ptm { padding-top: 10px !important; }

.pbm { padding-bottom: 10px !important; }

.ptw { padding-top: 20px !important; }

.pbw { padding-bottom: 20px !important; }

module.css文件架构解析（此文件必须按照格式编写）：

/** group::index **/

/* 群组 index 模块使用的CSS */

/** end **/

/** group::index,forum::index **/

/* 群组 index 和 论坛 index 模块使用的CSS */

/** end **/

/** forum **/

/* 论坛 所有模块使用的CSS */

/** end **/

实现模块化css分部加载！格式固定多个模块用”，“隔开例如：

/** misc::invite,group,forum::viewthread,portal::view,home::space **/

这个文件的分部加载是对应程序地址例如：forum.php?mod=forumdisplay，应当按照CURSCRIPT::$mod格式写即：forum::forumdisplay。

Q3: Web前端基础】css中浮动属性有什么？

css中的浮动属性是float。属性值有几个我不太清楚，不过常用的就是left和right，即左浮动和右浮动。

左浮动就是设置了浮动样式的元素飘到了屏幕左侧，飘是表示元素脱流了。右浮动同理。

值得一提的是浮动元素的父元素是没有高度的，需要做一些清除浮动的设置。比如给父元素加个高，或者设置overflow: hidden，当然最理想的是伪元素清除浮动。

Q4: CSS三大核心-浮动

1、标准流——标签按照规定好默认方式排列

2、浮动

3、定位

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

float属性用于创建浮动框，将其移动到一边，直到左边或者右边边缘及包含块或另一个浮动框的边缘。

选择器:{ float:属性值}

1、 浮动的元素会脱离标准流（脱标），不再保留原来的位置

2、浮动的元素会一行内显示并且元素顶部对齐

3、浮动的元素会具有行内块元素的特性

1、为了约束浮动元素，一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动左右位置，符合网页布局第一准则。

2、一个元素浮动了，理论上其余的兄弟元素也要浮动。浮动的盒子只会影响当前浮动盒子后面的标准流，不会影响前面的标准流

父级盒子不给高度，自己盒子会撑开父级盒子高度，但是加上浮动就会无效。

额外标签法也称为隔墙法，是W3C推荐的做法。会在浮动元素的末尾添加一个空的标签。例如：div style="chear:both"/div。新的标签必须是块级元素。

选择器:{ clear :属性值}

实际工作中几乎只用clear :both 。清除浮动的策略是闭合浮动，只让浮动在父级盒子内部影响。

可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。这个属性还用于外边距合并。   缺点就是无法显示溢出部分。

:after伪元素法相当于额外标签法的升级版，也是在浮动元素尾部添加空的块级元素，用法是给父元素添加属性。以下为固定格式。

类似于:after 伪元素法，只不过前后都会插入一个盒子，更符合闭合的概念。