码迷,mamicode.com
首页 > Web开发 > 详细

CSS-浮动

时间:2019-07-16 08:30:04      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:分行   hidden   div   content   flow   设置   元素   code   一起   

一:浮动

浮动是css里面布局最多的一个属性,也是很重要的一个属性。

float:表示浮动的意思。它有四个值。

  • none: 表示不浮动,默认
  • left: 表示左浮动
  • right:表示右浮动

二: 浮动的特性

  • 1.浮动的元素脱标
  • 2.浮动的元素互相贴靠
  • 3.浮动的元素由"子围"效果
  • 4.收缩的效果
  • 所有的标签一旦设置浮动,就能够并排,并且都不区分行内、块状元素,都能够设置宽高
  • 要浮动就要一起浮动。另外,有浮动,一定要清除浮动,

三: 清楚浮动

  • 给父盒子设置高度
  • clear:both
  • 伪元素清除法(常用)
  • overflow:hidden(常用)

3.1 给父盒子设置高度

这个方法给大家上个代码介绍,它的使用不灵活,一般会常用页面中固定高度的,并且子元素并排显示的布局。比如:导航栏

3.2 clear:both

clear:意思就是清除的意思。

有三个值:

left:当前元素左边不允许有浮动元素

right:当前元素右边不允许有浮动元素

both:当前元素左右两边不允许有浮动元素

给浮动元素的后面加一个空的div,并且该元素不浮动,然后设置clear:both。

 

3.3  伪元素清楚法(常用)

              content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden

 

CSS-浮动

标签:分行   hidden   div   content   flow   设置   元素   code   一起   

原文地址:https://www.cnblogs.com/wc89/p/11192652.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!