建设论坛网站大全,网站 上一篇 下一篇,本地专业app开发公司电话,织梦dedeeims网站打不开float 属性绝对是众多切图仔用的最多的 CSS 属性之一#xff0c;它的用法很简单#xff0c;常用值就 left、right、none 三个#xff0c;但是它的特性你真的弄懂了吗#xff1f; 我会在这里介绍我对 float 的认识与使用#xff0c;以及使用过程中遇到的问题。 对 float 的… float 属性绝对是众多切图仔用的最多的 CSS 属性之一它的用法很简单常用值就 left、right、none 三个但是它的特性你真的弄懂了吗 我会在这里介绍我对 float 的认识与使用以及使用过程中遇到的问题。 对 float 的认识 1. float 元素具有 BFC 模型特性 当给元素添加 float 属性后元素便会具有 BFC 模型的效果。比如给内联元素 span 等添加 float 属性后内联元素也可以设置宽高和 margin。 2. float 与 position 当给元素添加了绝对定位 absolute 或者 fixed 后元素的浮动效果就会消失即便 float 属性设置在 position 属性之后。 3. 脱离标准文档流 浮动元素会脱离标准文档流会给它后面的兄弟元素造成影响如果要清楚对兄弟元素的影响只需要给紧邻的兄弟元素添加 clear: both 就好但是紧邻的兄弟元素的 margin 依然是相对于父元素的。 4. 破坏父元素高度 当父元素没有设置高度也不是 BFC 模型时如果给子元素添加浮动效果那么便会造成父元素高度的坍塌。 要清除浮动给父元素带来的破坏效果方案也有很多最直接的是把父元素变成 BFC 模型的元素就行。 不过大家使用最多的方式应该是添加一个 .clearfix 的类不过对于这个类的写法有很多种而我一般使用的是张鑫旭老师的方法代码量最少 .clearfix {zoom: 1; } .clearfix::after { content: ; display: table; clear: both; } 5. float 与 padding 浮动元素不会超过父元素的内边距 padding。 利用第五点与第三点我们在方便的实现一些布局效果并减少层级嵌套。 比如我们通常会遇到如下的样式布局 代码实现 !DOCTYPE html
html langen head meta charsetUTF-8 / title浮动/title /head body div classcontainer p classtt1\. 这是标题/p button classbtn删除/button div classcon 这里是具体的内容 /div /div /body /html .container {width: 400px; padding: 20px; border: 1px solid #ccc; } .tt { float: left; margin: 0; width: 200px; overflow: hidden; } .btn { float: right; } .con { padding-top: 10px; clear: both; } 标题栏既有文本也有删除等按钮我们直接使用 float而下面的内容部分我们通过 clear: both; 来让显示位置正确。标题栏部分和内容部分的间距则通过给 .con 元素添加 padding 而不是 margin 来控制因为它的 margin 是相对于父容器的。 6. float 与 margin 两个相邻的浮动元素当第一个浮动元素的宽度为100%时第二个浮动元素会被挤到下面通过添加负的 margin-left 或者 margin-right 值绝对值最少等于它自身的宽度可以使它回到第一行。 常见布局 利用这一点我们也可以实现很多布局比如 在书写html代码时我们通常的习惯根据UI样式从左往右来写代码但有时候右侧的内容比较重要所以它的html结构需要放在左侧内容上面让它更早的加载。 div classcomment !-- 右侧重要内容 -- div classcontent div classauthor span classname哇哈哈/span span classdate2016-78-55/span /div p classtext吃的再多也不长胖好愁人啊怎么能快速长胖呢在线等急吃的再多也不长胖好愁人啊怎么能快速长胖呢在线等急吃的再多也不长胖好愁人啊怎么能快速长胖呢在线等急吃的再多也不长胖好愁人啊怎么能快速长胖呢在线等急吃的再多也不长胖好愁人啊怎么能快速长胖呢在线等急吃的再多也不长胖好愁人啊怎么能快速长胖呢在线等急吃的再多也不长胖好愁人啊怎么能快速长胖呢在线等急/p div classmeta span classmsg-tag赞/span span classmsg-tag回复/span /div /div !-- 左侧内容 -- a href# classavatarimg srcimages/header.jpg alt头像/a /div * {margin:0; padding:0;} li {list-style: none;} a {text-decoration: none;} body {font-family: 微软雅黑;} .wrap { width: 800px; margin: 50px auto; } .content { float: right; margin-left: 100px; } .date { font-size: 14px; color: #666; } .text { margin: 20px 0; } .avatar { float: left; margin-right: -80px; } .avatar img { width: 80px; height: 80px; border-radius: 50%; } 如上面图的效果尽管在UI上.content 元素在 .avatar 右边但我们在 html 结构中仍然需要把 .content 元素放到 .avatar 元素前面这个时候就可以通过给 .content 元素设置为右浮动然后给 .avatar 元素设置左浮动再添加负 margin-right 值让它回到上面。 2. 右侧定宽流式布局 !DOCTYPE html
html langen head meta charsetUTF-8 / titletest/title /head body div classcontent div classbox1 div classinner/div /div div classbox2/div /div /body /html .content {width: 500px; overflow: hidden; } .box1 { box-sizing: border-box; float: left; width: 100%; height: 50px; padding-right: 220px; border: 1px solid #ccc; } .inner { width: 100%; height: 40px; border: 1px solid #f23; } .box2 { float: right; width: 200px; height: 30px; margin-left: -100%; border: 1px solid #2fe; } 转载于:https://www.cnblogs.com/liuhao-web/p/8458051.html
