Обтекание

float - обтекание элемента другими элементами;
- none - обтекание отключено (по умолчанию);
- left - элемент прижимается к левому краю, а текст обтекает справа;
- right - элемент прижимается к правому краю;
clear - запрещает элементу располагаться рядом с float элементами;
- none - обтекание разрешено с любой стороны (по умолчанию);
- left - запретить обтекать справа (т.е. float элемент будет слева);
- right - запретить обтекать слева (т.е. float элемент будет справа);
- both - запретить обтекать со всех сторон;

Например. Изменим файл index.html:

html

<img src="/images/css/pepe-002.png" alt="Пример" />

<p>
    Это пример текста, который обтекает картинку. Картинка выровнена по левому
    краю, а текст располагается справа от неё и под ней, пока не закончится
    место. Float позволяет создавать обтекание без сложной верстки.
</p>

<p class="clearfix">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis
    consequatur corporis cupiditate explicabo laboriosam velit. Aliquid aperiam
    architecto atque aut, esse illum magnam quae veniam voluptatem! Ab ducimus
    impedit nihil!
</p>

Изменим файл styles.css:

css

img {
    float: left;
    margin: 0 15px 15px 0;
    width: 150px;
    height: auto;
}

.clearfix {
    clear: both;
}

Обтекание ​

Обтекание